如何在 Container 中显示 ListView 而无需在 Flutter 中设置 Container 高度？答案

【问题标题】：How to display ListView inside a Container without setting Container height in Flutter?如何在 Container 中显示 ListView 而无需在 Flutter 中设置 Container 高度？
【发布时间】：2020-12-06 22:45:15
【问题描述】：

在我的 Flutter 项目中，我使用用 Container 包装的 ListView 显示数据列表。现在，当我使用 Container 而不设置它的高度时，它会显示以下错误-

RenderBox 未布置：RenderRepaintBoundary#a418c relayoutBoundary=up16 需要-油漆需要-合成-位-更新 'package:flutter/src/rendering/box.dart'：断言失败：第 1687 行位置 12: 'hasSize'

这是我编写的课程的整个结构-

SingleChildScrollView(
            child: Column(
              children: <Widget>[

                showTheHistory(),

                Container(
                    height: MediaQuery.of(context).size.height-ScreenUtil.instance.setWidth(260),

                    child: Padding(
                      padding:  EdgeInsets.only(left: ScreenUtil.instance.setWidth(10), right: ScreenUtil.instance.setWidth(10)),
                      child: Container(
                        color: Colors.white,
                        child: FutureBuilder<List>(
                          future: _searchList,
                          initialData: List(),
                          builder: (context, snapshot) {
                            return snapshot.hasData ?
                            new ListView.builder(
                              padding:  EdgeInsets.all(ScreenUtil.instance.setWidth(10)),
                              itemCount: snapshot.data.length,
                              itemBuilder: (context, i) {
                                return _buildRow(snapshot.data[i]);
                              },
                            )
                                : Center(
                              child: NoResultFoundScreen(),
                            );
                          },
                        ),
                      ),
                    ),
                  ),
                

                SizedBox(height: ScreenUtil.instance.setHeight(10),),

                Container(
                  width: MediaQuery.of(context).size.width,
                  child: Padding(
                    padding:  EdgeInsets.only(left: ScreenUtil.instance.setWidth(10), right: ScreenUtil.instance.setWidth(10) ),
                    child: Column(
                      children: <Widget>[
                        Card(
                          elevation: 6,
                          child: Padding(
                            padding:  EdgeInsets.all(ScreenUtil.instance.setWidth(5)),
                            child: Row(
                              children: <Widget>[
                                
                                Text('English to ${Credentials.languageType}', style: TextStyle(fontSize: ScreenUtil.instance.setSp(18), color: Colors.teal, fontWeight: FontWeight.bold),)

                              ],
                            ),
                          ),
                        ),



                        Padding(
                          padding:  EdgeInsets.only(top:ScreenUtil.instance.setWidth(10)),
                          child: Card(
                            color: Colors.white,
                            elevation: 10,

                            child: Container(

                              child: Column(
                                children: <Widget>[

                                  getHowToUseText('1. '),

                                  Padding(
                                    padding: const EdgeInsets.only(left:8.0, right: 8.0),
                                    child: Divider(height: 2, color: Colors.grey,),
                                  ),

                                  getHowToUseText('2. While typing you will get auto suggestions. You can tap on the words to see meaning'),

                                ],
                              ),
                            ),

                          ),
                        )


                      ],
                    ),
                  ),
                ),

                SizedBox(
                  height: ScreenUtil.instance.setHeight(160),
                )

              ],
            ),
          ),

所以，如您所见，这些是为包装 ListView 的 Container 设置的高度。在 ListView 中，数据需要时间来加载，并且在这段时间内，具有该固定大小的容器保持空白，这显然是不好的。因此，尽管设置了 Container 的高度，我仍需要一个解决方案来使 Listview 高度动态化。

【问题讨论】：

标签： flutter listview dart

【解决方案1】：

将shrinkWrap: true 属性添加到listview 并删除容器。

您还有很多多余的小部件。你应该考虑重构你的代码。你应该看看 flutter.dev 上的小部件文档

【讨论】：

谢谢，它有效。我接受你的回答是正确的，但为了启用 listview 和 SingleChildScrollView 两者滚动 - 我只是将 physics: ScrollPhysics() 设置为我的 ListView.builder。