如何在SingleChildScrollView中使用Expanded？

Question

如何在SingleChildScrollView中使用Expanded？我有Image.network，ListView.builder和Row（TextFormField和Icon按钮）的屏幕。我用Expanded包装ListView。如何用SingleChildScrollView包装此列？打开滑水板时，我需要移动屏幕才能看到我写的东西。当我包装我的专栏时，我有此错误。

      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Container(
              child: GestureDetector(
                child:
                Image.network(
                  postOne.imageUrl,
                  fit: BoxFit.fitWidth,
                  height: MediaQuery
                      .of(context)
                      .size
                      .width,
                  width: MediaQuery
                      .of(context)
                      .size
                      .width,
                ),
                onLongPress: () {},
                onDoubleTap: () {},
              ),
            ),
            Expanded(
              //height: MediaQuery.of(context).size.width*0.33,
              child: ListView.builder(
                  itemCount: commentList.length,
                  itemBuilder: (context, position) {
                    return GestureDetector(
                        onLongPress: () {},
                        child: Card(
                          child: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: new CheckboxListTile(
                                title: new Text(commentList
                                    .elementAt(position)
                                    .coment,
                                  style: TextStyle(fontSize: 18.0),),
                                value: values[commentList
                                    .elementAt(position)
                                    .coment],
                                onChanged: (bool value) {}),
                          ),
                        )
                    );
                  }
              ),
            ),
            Container(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    new Flexible(
                      child: Theme(
                        data: new ThemeData(
                            brightness: Brightness.light,
                            primarySwatch: Colors.grey,
                            inputDecorationTheme: new InputDecorationTheme(
                              labelStyle: new TextStyle(
                                  color: Colors.black45, fontSize: 18.0
                              ),
                            )
                        ),
                        child: new Form(
                          key: _formKey,
                          child: new TextFormField(
                            validator: (value) {
                              if (value.isEmpty) {
                                return 'Please enter the comment';
                              }
                            },
                            controller: commentController,
                            decoration: new InputDecoration(
                              labelText: "Add comment",
                              //hintText: 'Add comment'
                            ),
                            keyboardType: TextInputType.text,
                          ),
                        ),
                      ),
                    ),
                    new Container(
                        margin: EdgeInsets.only(left: 10.0, top: 12.0),
                        child: new IconButton(
                            icon: new Icon(Icons.send, color: Colors.black,),
                            onPressed: () {}
                        )
                    ),
                  ]),
            ),
          ],
        ),
      ),

I/flutter ( 6816): ??? EXCEPTION CAUGHT BY RENDERING LIBRARY ??????????????????????????????????????????????????????????
I/flutter ( 6816): The following assertion was thrown during performLayout():
I/flutter ( 6816): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 6816): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter ( 6816): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter ( 6816): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter ( 6816): space in the vertical direction.
I/flutter ( 6816): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter ( 6816): cannot simultaneously expand to fit its parent.
I/flutter ( 6816): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter ( 6816): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter ( 6816): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter ( 6816): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter ( 6816): constraints provided by the parent.
I/flutter ( 6816): The affected RenderFlex is:
I/flutter ( 6816):   RenderFlex#9f534 relayoutBoundary=up11 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 6816): The creator information is set to:
I/flutter ( 6816):   Column ? _SingleChildViewport ? IgnorePointer-[GlobalKey#3670d] ? Semantics ? Listener ?
I/flutter ( 6816):   _GestureSemantics ? RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#4878e] ?
I/flutter ( 6816):   Listener ? _ScrollableScope ? _ScrollSemantics-[GlobalKey#c5885] ? RepaintBoundary ? CustomPaint ?
I/flutter ( 6816):   ?
I/flutter ( 6816): The nearest ancestor providing an unbounded width constraint is:
I/flutter ( 6816):   _RenderSingleChildViewport#155d8 relayoutBoundary=up10 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 6816):   creator: _SingleChildViewport ? IgnorePointer-[GlobalKey#3670d] ? Semantics ? Listener ?
I/flutter ( 6816):   _GestureSemantics ? RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#4878e] ?
I/flutter ( 6816):   Listener ? _ScrollableScope ? _ScrollSemantics-[GlobalKey#c5885] ? RepaintBoundary ? CustomPaint ?
I/flutter ( 6816):   RepaintBoundary ? ?
I/flutter ( 6816):   parentData: <none> (can use size)
I/flutter ( 6816):   constraints: BoxConstraints(0.0<=w<=440.8, 0.0<=h<=649.3)
I/flutter ( 6816):   size: MISSING
I/flutter ( 6816): See also: https://flutter.dev/layout/
I/flutter ( 6816): If this message did not help you determine the problem, consider using debugDumpRenderTree():
I/flutter ( 6816):   https://flutter.dev/debugging/#rendering-layer
I/flutter ( 6816):   http://docs.flutter.io/flutter/rendering/debugDumpRenderTree.html
I/flutter ( 6816): If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
I/flutter ( 6816):   https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter ( 6816): 

Answer 1

而不是使用的SingleChildScrollView，它更容易使用CustomScrollView了SliverFillRemaining。

尝试这个：

CustomScrollView(
  slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column(
        children: <Widget>[
          const Text('Header'),
          Expanded(child: Container(color: Colors.red)),
          const Text('Footer'),
        ],
      ),
    ),
  ],
)

Answer 2

答案在于错误本身。当该列位于可滚动的视图内时，该列会尝试对其内容进行收缩包装，但由于您用作Expanded该列的子项，因此它与尝试对其子项进行收缩包装的列相反。这是导致此错误的原因，因为这两个指令完全相反。

如错误日志中所述，请尝试以下操作：

考虑设置mainAxisSize为MainAxisSize.min（用于列）并使用FlexFit.loose适合灵活的（使用Flexible而不是Expanded）。

Answer 3

我尝试了 Vijaya Ragavan 解决方案，但对其进行了一些调整，但它仍然有效。要使用Expandedwith SingleChildScrollView，我使用ConstrainedBox并将其高度设置为屏幕的高度（使用MediaQuery）。您只需要确保放入的屏幕内容ConstrainedBox不大于屏幕的高度。

否则将高度设置为ConstrainedBox要在屏幕上显示的内容的高度。

SingleChildScrollView(
    child: ConstrainedBox(
        constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
                Expanded(
                    child: Text('Hello World!'),
                ),
            ],
        ),
    )
)

编辑： 要减去AppBar和/或状态栏的高度，请参见下文：

double screenHeightMinusAppBarMinusStatusBar = MediaQuery.of(context).size.height 
    - appBar.preferredSize.height
    - MediaQuery.of(context).padding.top;

Answer 4

只需将您的包裹SingleChildScrollView在 aCenter或一个Align元素中。

例子 ：

  Align(
    alignment: Alignment.topCenter,
    child: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          ...
        ]
      }
    }
  }

或者

  Center(
    child: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          ...
        ]
      }
    }
  }

Answer 5

尝试这个，

LayoutBuilder(
  builder: (context, constraint) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints(minHeight: constraint.maxHeight),
        child: IntrinsicHeight(
          child: Column(
            children: <Widget>[
              Text("Header"),
              Expanded(
                child: Container(
                  color: Colors.red,
                ),
              ),
              Text("Footer"),
            ],
          ),
        ),
      ),
    );
  },
)

当我遇到相同的情况时，我从git问题得到了这个解决方案。我没有git链接。我认为这可能对您有帮助。

Answer 6

您可以简单地将列包裹在一个大小合适的盒子中，并给它一个width和 ，height如下所示：

SingleChildScrollView(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height * 0.9,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container() //widget here
              const Expanded(
                child: SizedBox(),
              ),
              Container() //widget here
            ],
          ),