不同于ListView
默认构造函数通过children
参数指定子元素的这种方式,ListView.build
通过暴露统一的itemBuilder
方法将渲染子元素的控制权交还给调用方。这里我们用一个微信公众号的例子来说明ListView.build
的使用方法(公众号卡片的样式布局可以看这里,也算是对基础组件的一个巩固和复习):
代码(文件地址)
class SubscribeAccountList extends StatelessWidget {
const SubscribeAccountList({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Color(0xFFEFEFEF),
child: ListView.builder(
itemCount: subscribeAccountList.length,
itemBuilder: (context, index) {
return SubscribeAccountCard(data: subscribeAccountList[index]);
},
),
);
}
}
预览
根据上面的代码可以看到,ListView.build
创建列表最重要的两个参数就是itemCount
和itemBuilder
。对于公众号列表这个例子,由于每个公众号消息卡片的布局都是有规则的,而且这个列表的数量可能非常之多,所以用ListView.build
来创建再适合不过了。
2.3 ListView.separated()
绝大多数列表类的需求我们都可以用ListView.build
构造函数来解决问题,不过有的列表子项之间需要分割线
,此时我们可以用Flutter
提供的另一个构造函数ListView.separated
来创建列表。来看下其构造函数有什么不同:
ListView.separated({
…
@required IndexedWidgetBuilder separatorBuilder
})
相比于ListView.build
构造函数,可以看到L