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

如何解决Flutter：固定高度容器内的可滚动列子项

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

---

我希望其中一个容器是这样的：

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 包裹您的 Expanded。删除您的 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');
            }
        ),)
]
))

,

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

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

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