Flutter SingleChildScrollView with Expanded column child

Question

我正在嘗試歸檔一個布局，該布局類似於具有頂部固定區域（紅色）和可滾動區域（黃色）的圖像，頂部有一些文本字段（文本 1，文本 2），底部有一個終端元素可滾動區域的（*底部文本）。 我試着用下面的代碼來做，但我得到了一些錯誤，如圖所示：

使用此代碼

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")
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        )
      ],
    )

結果：