Flutter中紫色容器下方ListView.builder显示空白问题求助

嘿，我一眼就瞅出你代码里的问题啦！

问题根源 #

你在Column里直接嵌套了ListView.builder，但Column的垂直布局逻辑是让子组件根据自身内容自适应高度，而ListView默认会试图占据无限多的垂直空间——这俩的布局需求完全冲突，导致ListView无法正确渲染，所以屏幕才会显示空白，而且因为是布局约束的隐性问题，不会抛出明显报错。

快速修复方案 #

给包裹ListView.builder的容器外面套一层Expanded组件，它会让ListView自动占据Column中紫色容器剩下的所有可用垂直空间，完美解决布局约束冲突：

return Scaffold(
 body: Column(
 children: <Widget>[
 Container(
 height: 300,
 decoration: BoxDecoration(
 color: Colors.deepPurple,
 borderRadius: BorderRadius.only(bottomLeft: Radius.circular(75.0)),
 ),
 child: Column(
 children: <Widget>[
 Padding(
 padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
 child: Container(
 padding: EdgeInsets.fromLTRB(0, 30,200,0),
 child: IconButton(icon: Icon(Icons.arrow_back,), color: Colors.black, onPressed: () { Navigator.pop(context); }, ),
 ),
 ),
 SizedBox(height: 20,),
 Text('Semester 1', style: TextStyle(color: Colors.white, fontSize: 30), )
 ],
 )
 ),
 // 关键修改：用Expanded包裹ListView，让它占据剩余垂直空间
 Expanded(
 child: ListView.builder(
 itemCount: 1,
 itemBuilder: (BuildContext context, int index) {
 return new Container(
 child: new Center(
 child: new Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 children: <Widget>[
 new Card(
 child: new Container(
 child: new Text("hello"),
 padding: const EdgeInsets.all(20),
 ))
 ],
 )));
 }),
 )
 ],
 ),
 );

其他可选方案 #

如果你只是想让ListView根据内容收缩到合适高度（比如列表项很少的情况），也可以给ListView.builder加上shrinkWrap: true属性，但要注意：这个属性会让ListView一次性渲染所有列表项，当列表数据量大时会影响性能，所以更推荐用Expanded的方案。

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