[Flutter] 列表的使用

介绍 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}'),
              ),
            )
          ),
        );
},