}
预览
可以看到,默认构造函数
的用法非常之简单,直接把子元素组件放在children
数组中就可以了。但是潜在的问题前面也已经解释过,对于长列表
这种应用场景还是应该用ListView.build
构造函数性能会更好。
2.2 ListView.build()
ListView
默认构造函数虽使用简单,但不适用于长列表。为此,我们来看下ListView.build
构造函数:
ListView.builder({
…
int itemCount,
@required IndexedWidgetBuilder itemBuilder,
})
这里省略了不常用以及和ListView
默认构造函数重复的一些参数,相比之下我们可以发现ListView.builder
多了两个新的参数:
-
itemCount
: 列表中元素的数量; -
itemBuilder
: 子元素的渲染方法,允许自定义子元素组件(等同于rn
中FlatList
组件的renderItem
属性)。
不同于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
来创建列表。来看下其构造函数有什么不同: