返回

flutter中ListView的使用方法

Created By ZOU on Aug 19 2019

在用flutter开发app时经常会有列表展示的场景,在这个场景下经常会使用到ListView。

LisView的用法:

1.通过ListView.builder生成列表

/// 使用builder方法构建列表
ListView.builder(
/// 生成数量
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
/// ListTile是一个包含标题,标题前缀,后缀并且固定高度的widget
/// 通常用来填充ListView
return ListTile(
/// 监听点击
onTap: () {
/// 打印index
print(index);
},
/// 标题
title: Text('这是第 $index 个标题'),
/// 子标题
subtitle: Text('这是第 $index 个子标题'),
/// 在行头显示一个脸的图标
leading: Icon(
Icons.face
),
/// 在行尾显示一个耳机图标
trailing: Icon(
Icons.headset
),
)
}
);

显示效果如下:

2.通过ListView.separated生成分割列表

/// 通过separated生成带有分割元素的列表
ListView.separated(
/// 分割元素
separatorBuilder: (context, int index) {
/// 通过分割线分割每个元素
return Divider();
},
/// item数量
itemCount: 10,
/// 生成元素
itemBuilder: (context, int index) {
return ListTile(
/// 监听点击
onTap: () {
/// 打印index
print(index);
},
/// 标题
title: Text('这是第 $index 个标题'),
/// 子标题
subtitle: Text('这是第 $index 个子标题'),
/// 在行头显示一个脸的图标
leading: Icon(
Icons.face
),
/// 在行尾显示一个耳机图标
trailing: Icon(
Icons.headset
),
);
},
);

显示效果如下:

或者你可以直接使用ListView

/// 生成列表元素列表
List<Widget> _listItems = List.generate(
/// 生成数量
10,
(int index) {
return ListTile(
/// 监听点击
onTap: () {
/// 打印index
print(index);
},
/// 标题
title: Text('这是第 $index 个标题'),
/// 子标题
subtitle: Text('这是第 $index 个子标题'),
/// 在行头显示一个脸的图标
leading: Icon(
Icons.face
),
/// 在行尾显示一个耳机图标
trailing: Icon(
Icons.headset
),
);
}
);
/// 直接使用ListView
ListView(
/// 子元素列表
children: _listItems
)

显示效果跟第一张图是一样的

标签: flutter dart