它是一种可滚动的列表,共四种构造方法。其中最常用的是ListView.builder构造方法,因为它适用于大量的列表项的情形,甚至可以是无限数量的项。
- ListView()
- ListView.builder()
- ListView.separated()
- ListView custom()
创建一个固定个数,使用ListTile,带样式的列表
final List<String> titles = ['账户申请', '单笔付款申请', '批量付款申请', '资金下拨申请', '业务支持申请', '单笔收款申请',];
Container(
color: Colors.grey[200],
padding: const EdgeInsets.only(top: 10),
child: ListView.builder(
itemCount: 6,
itemBuilder: (ctx, index){
return Container(
margin: const EdgeInsets.symmetric(horizontal: 15, vertical: 7.5),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5))
),
child: ListTile(
leading: CircleAvatar(
child: Text('$index'),
),
title: Text(titles[index]),
subtitle: Text('您有$index笔'+titles[index] +',请及时申请'),
trailing: const Icon(Icons.arrow_forward_ios),
onTap: (){
debugPrint('你点击了'+titles[index]);
},
),
);
},
),
)
20220507112714.jpg
创建一个固定个数,有分割线的列表
ListView.separated(
itemCount: 50,
itemBuilder: (ctx, index){
return Container(
color: bgColors[index%5],
height: 70,
);
},
separatorBuilder: (ctx, index) {
//indent左边缩进, endIndent右边缩进, 线条的厚度
return const Divider(height: 30,color: Colors.orange, indent: 16, endIndent: 16, thickness: 20,);
}
),
本地Flutter 2.10.1,Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子,初学Flutter ,文章会根据学习进度不定时更新,请多多指教~~
网友评论