// 构建列表项
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,
)
第四种 - ListView.custom
构建
开始我们查看了源码,现在来看这第四种方式,是不是就很显而易见了,这里我们使用了 SliverChildBuilderDelegate
这个之后我们也会详细聊到
ListView.custom(
childrenDelegate: SliverChildBuilderDelegate(
文末
很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候,总会遇到一些问题,比如学了一段时间感觉没有方向感,不知道该从那里入手去学习,对此我整理了一些资料,需要的可以免费分享给大家
这里笔者分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司19年的面试题,把技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节,由于篇幅有限,这里以图片的形式给大家展示一部分。如有需要点击这里前往我的GitHub免费获取。
【视频教程】
天道酬勤,只要你想,大厂offer并不是遥不可及!希望本篇文章能为你带来帮助,如果有问题,请在评论区留言。
91832)]
【视频教程】
[外链图片转存中…(img-5rExg29M-1644915291833)]
天道酬勤,只要你想,大厂offer并不是遥不可及!希望本篇文章能为你带来帮助,如果有问题,请在评论区留言。