问题描述
我在 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()
允许编译器创建更高效的代码。