ListView in a Row Flutter答案

【问题标题】：ListView in a Row FlutterListView in a Row Flutter
【发布时间】：2021-06-24 17:16:06
【问题描述】：

我想要实现的是在左半部分有一个静态容器，在屏幕右半部分有一个可滚动的项目列表：

|----------------------|
|           |          |
| Container | ListView |
|           |          |
|----------------------|

这是一个桌面应用程序，所以我喜欢这种布局。我的实现：（appStatWidgets 是带有文本的容器列表）

                          Row(
                              children: [
                            Container(height: 400, width: 400, color: Colors.green),
                            Expanded(
                              child: ListView(
                                children: appStatWidgets,
                              ),
                            )
                          ]),

但如果我这样做，ListView 是不可见的，我得到：

Vertical viewport was given unbounded height.

但我想，那展开可以解决这个问题。

有效的方法是使用 SizedBox 而不是 Expanded，但这给了我静态大小，我希望它灵活一些。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

在列表视图参数中使用shrinkwrap: true，以防止其具有未绑定的高度。

例如，如果您的 Sized 框采用一半高度，请使用 mediaQuery 定义高度。即

SizedBox(height: MediaQuery.of(context).size.height * 0.50) 这会将其高度设置为屏幕的 50%。

对于ListView(physics，使用physics: AlwaysScrollableScrollPhysics()。

【讨论】：

如果我做 shrinkwrap: true ListView 是可见的，但溢出底部。它也不能滚动
把它放在展开的盒子里，溢出的可能是ListView里面的元素。如果appStatWidgets 里面有列或类似的东西，它的孩子不是托管的，但它不是listView 本身。对于滚动，在列表视图中设置他的参数physics: AlwaysScrollableScrollPhysics()。

【解决方案2】：

对于连续的列表视图，请确保将滚动方向设置为 Axis.horizontal，另外还要确保为列表视图提供垂直边界，因此将其放入仅具有高度的容器中。

【讨论】：

好的，所以我把它放在一个有高度的容器里。它可以工作，但你知道有什么方法可以让容器的高度达到其父容器的 100% 吗？（以 html 术语）
Mediaquery.of(context).size.height 作为容器的高度

【解决方案3】：

  Row(
                          children: [
                        Container(height: 400, width: 400, color: Colors.green),
                        Expanded(
                          child:SizedBox(
                             width:100,
                             heigth:100,
                          child:ListView(
                            children: appStatWidgets,
                          ),
                              )
                        )
                      ]),

这样

【讨论】：

【解决方案4】：

用大小框包裹列表视图并提供宽度和高度

【讨论】：

这行得通，但如果我想让它占据屏幕的一半怎么办。我不能将静态宽度与 SizedBox 一起使用。
你可以做到提供行主轴对齐然后可以帮助你