带有扩展列子项的 Flutter SingleChildScrollView

Question

我正在尝试归档类似于图像的布局，其中有一个顶部固定区域(红色)和一个可滚动区域(黄色)，顶部有一些文本字段(文本 1、文本 2)和一个终端元素在可滚动区域的底部 (* Bottom Text)。我试着用下面的代码来做，但我得到了一些错误，如图所示:

使用这段代码

Widget _data(BuildContext context) {
        return new Column(children: <Widget>[
            Container(
                color: Colors.red,
                height: 200
            ),
            Expanded(
              child: Container(
                color: Colors.yellow,
                child: SingleChildScrollView(
                    child: Column(
                        children: [
                            new Text("Text 1"),
                            new Text("Text 2"),
                            new Expanded(
                                child: new Align(
                                    alignment: Alignment.bottomCenter,
                                    child: new Row(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: <Widget>[
                                            new Icon(Icons.star),
                                            new Text("Bottom Text")
                                        ],
                                    )))
                        ],
                    ),
                ),
              ),
            )

        ]);
    }

和错误:

 ════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.

When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.

Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.

If this message did not help you determine the problem, consider using debugDumpRenderTree():
  https://flutter.dev/debugging/#rendering-layer
  http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
The affected RenderFlex is: RenderFlex#f257e relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=Infinity)
  size: MISSING
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
...  child 1: RenderParagraph#3042c relayoutBoundary=up14 NEEDS-PAINT
...    parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...    constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=Infinity)
...    size: Size(38.0, 16.0)
...    textAlign: start
...    textDirection: ltr
...    softWrap: wrapping at box width
...    overflow: clip
...    locale: en_US
...    maxLines: unlimited
...    text: TextSpan
...      debugLabel: (englishLike body1 2014).merge(blackMountainView bodyText2)
...      inherit: false
...      color: Color(0xdd000000)
...      family: Roboto
...      size: 14.0
...      weight: 400
...      baseline: alphabetic
...      decoration: TextDecoration.none
...      "Text 1"
...  child 2: RenderParagraph#9fc6a relayoutBoundary=up14 NEEDS-PAINT
...    parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...    constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=Infinity)
...    size: Size(38.0, 16.0)
...    textAlign: start
...    textDirection: ltr
...    softWrap: wrapping at box width
...    overflow: clip
...    locale: en_US
...    maxLines: unlimited
...    text: TextSpan
...      debugLabel: (englishLike body1 2014).merge(blackMountainView bodyText2)
...      inherit: false
...      color: Color(0xdd000000)
...      family: Roboto
...      size: 14.0
...      weight: 400
...      baseline: alphabetic
...      decoration: TextDecoration.none
...      "Text 2"
...  child 3: RenderPositionedBox#5d50a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
...    constraints: MISSING
...    size: MISSING
...    alignment: bottomCenter
...    textDirection: ltr
...    widthFactor: expand
...    heightFactor: expand
...    child: RenderFlex#0cef5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
...      direction: horizontal
...      mainAxisAlignment: center
...      mainAxisSize: max
...      crossAxisAlignment: center
...      textDirection: ltr
...      verticalDirection: down
...      child 1: RenderSemanticsAnnotations#e51a3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
...        constraints: MISSING
...        size: MISSING
...        child: RenderExcludeSemantics#fe319 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none>
...          constraints: MISSING
...          size: MISSING
...          excluding: true
...      child 2: RenderParagraph#f3d9e NEEDS-LAYOUT NEEDS-PAINT
...        parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
...        constraints: MISSING
...        size: MISSING
...        textAlign: start
...        textDirection: ltr
...        softWrap: wrapping at box width
...        overflow: clip
...        locale: en_US
...        maxLines: unlimited
...        text: TextSpan
...          debugLabel: (englishLike body1 2014).merge(blackMountainView bodyText2)
...          inherit: false
...          color: Color(0xdd000000)
...          family: Roboto
...          size: 14.0
...          weight: 400
...          baseline: alphabetic
...          decoration: TextDecoration.none
...          "Bottom Text"
The creator information is set to: Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#9947f] ← Semantics ← _PointerListener ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#684ef] ← _PointerListener ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#cace4] ← ⋯
The nearest ancestor providing an unbounded width constraint is: _RenderSingleChildViewport#f3d08 relayoutBoundary=up12 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(0.0<=w<=360.0, h=404.0)
...  size: MISSING

See also: https://flutter.dev/layout/

If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
  https://github.com/flutter/flutter/issues/new?template=BUG.md
The relevant error-causing widget was: 
  Column file:///F://FlutterApp/my_login/lib/widgets/Login.dart:50:16
When the exception was thrown, this was the stack: 
#0      RenderFlex.performLayout.<anonymous closure> (package:flutter/src/rendering/flex.dart:712:11)
#1      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:739:10)
#2      RenderObject.layout (package:flutter/src/rendering/object.dart:1769:7)
#3      _RenderSingleChildViewport.performLayout (package:flutter/src/widgets/single_child_scroll_view.dart:544:13)
#4      RenderObject.layout (package:flutter/src/rendering/object.dart:1769:7)
...
The following RenderObject was being processed when the exception was fired: RenderFlex#f257e relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=Infinity)
...  size: MISSING
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
RenderObject: RenderFlex#f257e relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=Infinity)
  size: MISSING
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
...  child 1: RenderParagraph#3042c relayoutBoundary=up14 NEEDS-PAINT
...    parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...    constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=Infinity)
...    size: Size(38.0, 16.0)
...    textAlign: start
...    textDirection: ltr
...    softWrap: wrapping at box width
...    overflow: clip
...    locale: en_US
...    maxLines: unlimited
...    text: TextSpan
...      debugLabel: (englishLike body1 2014).merge(blackMountainView bodyText2)
...      inherit: false
...      color: Color(0xdd000000)
...      family: Roboto
...      size: 14.0
...      weight: 400
...      baseline: alphabetic
...      decoration: TextDecoration.none
...      "Text 1"
...  child 2: RenderParagraph#9fc6a relayoutBoundary=up14 NEEDS-PAINT
...    parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...    constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=Infinity)
...    size: Size(38.0, 16.0)
...    textAlign: start
...    textDirection: ltr
...    softWrap: wrapping at box width
...    overflow: clip
...    locale: en_US
...    maxLines: unlimited
...    text: TextSpan
...      debugLabel: (englishLike body1 2014).merge(blackMountainView bodyText2)
...      inherit: false
...      color: Color(0xdd000000)
...      family: Roboto
...      size: 14.0
...      weight: 400
...      baseline: alphabetic
...      decoration: TextDecoration.none
...      "Text 2"
...  child 3: RenderPositionedBox#5d50a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
...    constraints: MISSING
...    size: MISSING
...    alignment: bottomCenter
...    textDirection: ltr
...    widthFactor: expand
...    heightFactor: expand
...    child: RenderFlex#0cef5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
...      direction: horizontal
...      mainAxisAlignment: center
...      mainAxisSize: max
...      crossAxisAlignment: center
...      textDirection: ltr
...      verticalDirection: down
...      child 1: RenderSemanticsAnnotations#e51a3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
...        constraints: MISSING
...        size: MISSING
...        child: RenderExcludeSemantics#fe319 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none>
...          constraints: MISSING
...          size: MISSING
...          excluding: true
...      child 2: RenderParagraph#f3d9e NEEDS-LAYOUT NEEDS-PAINT
...        parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
...        constraints: MISSING
...        size: MISSING
...        textAlign: start
...        textDirection: ltr
...        softWrap: wrapping at box width
...        overflow: clip
...        locale: en_US
...        maxLines: unlimited
...        text: TextSpan
...          debugLabel: (englishLike body1 2014).merge(blackMountainView bodyText2)
...          inherit: false
...          color: Color(0xdd000000)
...          family: Roboto
...          size: 14.0
...          weight: 400
...          baseline: alphabetic
...          decoration: TextDecoration.none
...          "Bottom Text"
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#057ad relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#cc735 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#f257e relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'
The relevant error-causing widget was: 
  SingleChildScrollView file:///F://FlutterApp/my_login/lib/widgets/Login.dart:49:15
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: RenderBox was not laid out: RenderPointerListener#630c8 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#485d8 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: _RenderSingleChildViewport#f3d08 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'
The relevant error-causing widget was: 
  SingleChildScrollView file:///F://FlutterApp/my_login/lib/widgets/Login.dart:49:15
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: RenderBox was not laid out: RenderPointerListener#516b1 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderIgnorePointer#057ad relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'
The relevant error-causing widget was: 
  SingleChildScrollView file:///F://FlutterApp/my_login/lib/widgets/Login.dart:49:15
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#a7fee relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#70986 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#cc735 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'
The relevant error-causing widget was: 
  SingleChildScrollView file:///F://FlutterApp/my_login/lib/widgets/Login.dart:49:15

════════════════════════════════════════════ ══════════════════════════════════════════════════ ═══

Answer 1

这行得通。检查一下。

   Column(
      children: <Widget>[
        Container(color: Colors.red, height: 200),
        Expanded(
          child: Container(
            color: Colors.yellow,
            child: LayoutBuilder(
              builder: (context, constraint) {
                return SingleChildScrollView(
                  child: ConstrainedBox(
                    constraints:
                        BoxConstraints(minHeight: constraint.maxHeight),
                    child: IntrinsicHeight(
                      child: Column(
                        children: [
                          Text("Text 1"),
                          Text("Text 2"),
                          // middle widget goes here
                          Expanded(
                            child: Container(),
                          ),
                          Align(
                            alignment: Alignment.bottomCenter,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Icon(Icons.star),
                                Text("Bottom Text")
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        )
      ],
    )

结果: