介绍 ListView
在前文中提到过使用 Column 来实现 列表效果,原理是将一组数据映射为一组 widget 作为 Column 的 children,问题是这样的 column 是无法滚动,而且对于 item 数量很多时会有性能问题。
更好的解决方案是使用 ListView,其使用方式是提供 item 数量和 item 构造方式。
Dart(
itemCount: array.length,
itemBuilder: (context, index) {
return SomeWidget(array[index]);
},
);
Tips
- 在列表中可以使用系统的 ListTile 来快速完成开发,
- 并为了较好的样式可以将其嵌入到 Card 中
- 使用 Padding 为 item 周围设置边距
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 1, horizontal: 4),
child: Card(
child: ListTile(
onTap: () { updateTime(index); },
title: Text(array[index].name),
leading: CircleAvatar(
backgroundImage: AssetImage('assets/${array[index].imageName}'),
),
)
),
);
},