Flutter 中 ListView 的 4 种构建方式详解 _ Flutter Widgets

最新推荐文章于 2024-05-24 10:54:36 发布

2401_84149381

最新推荐文章于 2024-05-24 10:54:36 发布

阅读量2.8k

点赞数 33

分类专栏：程序员文章标签： flutter javascript 前端

本文链接：https://blog.csdn.net/2401_84149381/article/details/137852805

版权

程序员专栏收录该内容

287 篇文章 1 订阅

订阅专栏

children: List.generate(100, (index) {
return getItem(index);
}),
)

看看 getItem 实现

使用 Flutter 中 ListTile 可以快速构建一个列表项

因为是模拟数据，这里取余一下

/// 获取子项目
Widget getItem(int index) {
// 获取数据
var item = listData[index % 5];
// 构建列表项
return ListTile(
// 前部图片
leading: Image.network(
item.url,
width: 80,
height: 60,
fit: BoxFit.cover,
),
// 标题
title: Text(item.title),
// 副标题
subtitle: Text(item.desc),
// 后部箭头
trailing: Icon(Icons.keyboard_arrow_right_outlined),
onTap: () {
print(‘index’);
},
onLongPress: () {
print(‘${item.desc}’);
},
);
}

添加分割线

看上图是没有添加分割线的，我们只需要使用 ListTile.divideTiles 即可添加上分割线啦

ListView(
children: ListTile.divideTiles(
context: context,
tiles: List.generate(100, (index) {
return getItem(index);
}),
).toList(),
)

第二种 - `ListView.separated` 构建

说到分割线我们不得不说说第二种构建方式了，来看看他怎么使用吧，这也是另外一个种最常用的构建分隔线的方法

ListView.separated(
itemBuilder: (context, index) {
return getItem(index);
},
// 奇数有分割线
separatorBuilder: (context, index) =>
index.isOdd ? Divider(height: 10) : SizedBox(),
// 80 个数量
itemCount: 80,
)

相比之前这里我们使用分隔符构建起

第三种 - `ListView.builder` 构建

这种也是我们最常用的，使用起来也非常的简单

ListView.builder(
itemBuilder: (context, index) {
return getItem(index);
},
itemCount: 20,
)

滚动方向

列表类 Widget 都有一个重要的属性 scrollDirection 可以控制滚动的方向，方便我们根据需要调整方向

Axis.vertical 纵向（默认）
Axis.horizontal 横向

ListView.builder(
// 设置横向滚动
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return SizedBox(
width: 300,
child: getItem(index),
);
},
itemCount: 20,
)