Flutter SingleChildScrollView，带有扩展列子级

编程问答 2022-08-15

问题描述

我正尝试将类似于以下布局的图像归档：顶部固定区域（红色），可滚动区域（黄色），顶部具有一些文本字段（文本1，文本2）和一个终端元素在可滚动区域的底部（*底部文本）。我尝试使用下面的代码来做到这一点，但是我收到了一些错误，如下所示：

Wanted_layout

使用此代码

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,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); 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

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

解决方法

这有效。看看。

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

结果：

enter image description here

dartflutter-layoutsinglechildscrollview

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...