Flutter：固定高度容器内的可滚动列子项答案

【问题标题】：Flutter: Scrollable Column child inside a fixed height ContainerFlutter：固定高度容器内的可滚动列子项
【发布时间】：2021-08-20 22:44:07
【问题描述】：

我在一个 ListView 中有几个 containiers，这将在页面内产生一个可滚动内容。 每个容器都有一个子列，在列中我有一个标题和一个分隔符，然后是实际内容。

我希望其中一个容器类似于：

Title
--------- (divider)
Scrollable content (most likely a ListView)

到目前为止我所拥有的：

Container(
    height: 250,
    child: Column(children: <Widget>[
        Text('Title'),
        Divider(),
        SingleChildScrollView(
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: 15,
                itemBuilder: (BuildContext context, int index) {
                    return Text('abc');
                }
            )
        )
    ]
)

问题是我希望容器具有特定的高度，但我得到了溢出像素错误。

【问题讨论】：

尝试将 listview.builder 包装在 Expanded 中
谢谢@MinhNguyên，效果很好。我会将Nbh的答案设置为最佳答案，只是为了让其他人更清楚，更快速地看到它，但你解决了问题。 :)
你能给我“有用的”吗:)

标签： flutter scroll containers height fixed

【解决方案1】：

将ListView.builder() 小部件包装在SizedBox() 小部件中，并在容纳Title() 小部件后指定可用高度。

Container(
    height: 250,
    child: Column(children: <Widget>[
        Text('Title'),
        Divider(),
        SizedBox(
            height: 200, // (250 - 50) where 50 units for other widgets
            child: SingleChildScrollView(
                child: ListView.builder(
                    shrinkWrap: true,
                    itemCount: 15,
                    itemBuilder: (BuildContext context, int index) {
                        return Text('abc');
                    }
                )
            )
        )
    ]
)

您也可以使用Container() 小部件代替SizedBox() 小部件，但仅限于需要时。 SizedBox() 是一个 const 构造函数，而 Container() 小部件不是，因此 SizedBox() 允许编译器创建更高效的代码。

【讨论】：

【解决方案2】：

用Expanded 包裹你的ListView。删除你的 SingleChildScrollView 因为 ListView 有它自己的滚动行为。尝试如下：

Container(
height: 250,
child: Column(children: <Widget>[
    Text('Title'),
    Divider(),
    Expanded(
      
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: 15,
            itemBuilder: (BuildContext context, int index) {
                return Text('abc');
            }
        ),
    
    )
]
))

【讨论】：