flutter - Flutter:SingleChildScrollView 沿垂直轴收缩其子项错误
问题描述
在 Scaffold 我有一个容器来设置 background 。在容器的孩子中,我有SingleChildScrollView
,在它的孩子中,我有Column
. 在这个小部件的孩子中,我有 2Expanded
个小部件:
Scaffold
|
Container
|
SingleChildScrollView
|
* Expanded
* Expanded
这是代码:
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
resizeToAvoidBottomPadding: true,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/main_background.png"),
fit: BoxFit.cover,
),
),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(..)
Expanded(..)
我的问题是当在这个页面上运行时,所有页面都有粉红色意味着我收到了这个错误:
I/flutter ( 8893): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 8893): The following assertion was thrown during performLayout():
I/flutter ( 8893): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 8893): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter ( 8893): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter ( 8893): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter ( 8893): space in the vertical direction.
I/flutter ( 8893): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter ( 8893): cannot simultaneously expand to fit its parent.
I/flutter ( 8893): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter ( 8893): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter ( 8893): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter ( 8893): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter ( 8893): constraints provided by the parent.
I/flutter ( 8893): If this message did not help you determine the problem, consider using debugDumpRenderTree():
I/flutter ( 8893): https://flutter.dev/debugging/#rendering-layer
I/flutter ( 8893): http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
I/flutter ( 8893): The affected RenderFlex is:
I/flutter ( 8893): RenderFlex#4b35c relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#fcff2] ← Semantics ← _PointerListener ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#e245d] ← _PointerListener ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#471e6] ← ⋯, parentData: <none> (can use size), constraints: BoxConstraints(0.0<=w<=320.0, 0.0<=h<=Infinity), size: MISSING, direction: vertical, mainAxisAlignment: start, mainAxisSize: max, crossAxisAlignment: center, verticalDirection: down)
I/flutter ( 8893): The creator information is set to:
I/flutter ( 8893): Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#fcff2] ← Semantics ← .....
问题是什么?
解决方案
- Expanded 会根据父Column的box约束展开
- 看起来 SingleChildScrollView 正在将无限高度约束传递给 Column 并且 Expanded 试图扩展到无限。
尝试用 Container 或 ConstrainedBox 包裹 Column 并传递有限高度。为了了解更多,我写了一篇关于为什么会发生这种情况的文章。
推荐阅读
- javascript - 在 JS 中使用深度文字键减少对象数组
- java - 使匿名内部类成为 Java 中的 lambda
- c++ - 无符号长字符串以二进制形式附加 ascii 值。C++
- node.js - 使用 socket.io 响应 Native 一对一对话
- javascript - JSX 内部循环
- javascript - React:根据点击事件显示过滤后的数组项
- javascript - 如何通过 RESTful API 在 WordPress 中上传多张图片?
- javascript - 通过页脚wordpress中的jquery文件呈现阻塞
- windows - 当我使用 C++/CLI winforms 时,为什么#include Windows.h 会出现很多错误?
- javascript - 如何将字符串格式日期转换为日、日期、小时格式以与我的本地机器时间相同