Flutter：如何让含TabView与ListView的容器占满屏幕底部空间

嘿，我帮你调整了代码，解决这个问题的核心是用Expanded组件替代固定高度设置。原来的height:400.0会强制容器限制在固定高度里，而Expanded会自动填充Column中除了顶部TabBar之外的所有剩余屏幕空间，这样里面的ListView就能正常滚动且充分利用可用区域了。

修改后的完整代码如下：

Widget build(BuildContext context) {
 return Container(
 child: Column(
 children: <Widget>[
 Padding(
 padding: const EdgeInsets.only(left:20.0,right:20.0),
 child: Container(
 color: Colors.white,
 child: new TabBar(
 controller: _controller,
 labelColor: Colors.deepOrange,
 tabs: [
 new Tab(
 icon: const Icon(Icons.description),
 text: 'ABC',
 ),
 new Tab(
 icon: const Icon(Icons.assignment),
 text: 'XYZ',
 ),
 ],
 ),
 ),
 ),
 // 用Expanded包裹，自动填充剩余空间
 Expanded(
 child: Padding(
 padding: const EdgeInsets.only(left:20.0,right:20.0),
 child: Container(
 color: Colors.white,
 child: new TabBarView(
 controller: _controller,
 children: <Widget>[
 ListView(
 children: <Widget>[
 ListTile(
 title: Text('Sun'),
 ),
 ListTile(
 title: Text('Moon'),
 ),
 ListTile(
 title: Text('Star'),
 ),
 ],
 ),
 ListView(
 children: <Widget>[
 ListTile(
 title: Text('Sun'),
 ),
 ListTile(
 title: Text('Moon'),
 ),
 ListTile(
 title: Text('Star'),
 ),
 ],
 ),
 ],
 ),
 ),
 ),
 ),
 ],
 ),
 );
 }

关键改动说明： #

• 移除了TabBarView外层Container的height:400.0属性
• 将整个Padding+Container部分包裹在Expanded组件内，Expanded会自动占据Column中未被顶部TabBar占用的所有剩余空间
• 这样ListView就能在可用空间内正常滚动，容器也会自动适配屏幕底部的剩余区域

内容的提问来源于stack exchange，提问作者Android