Flutter列表
ListView简介
最简单的,Flutter中可以使用ListView来实现一个列表功能
ListView的使用和Column()类似:
body: ListView(
children: const <Widget>[
//添加子Widget
],
),
- ListView中的常用参数:
参数名称 | 使用 |
---|---|
children: List | 配置列表中的元素 |
scrollDirection: Axis | 使用Axis.horizontal和Axis.vertical配置列表滑动方向 |
padding: EdgeInsertsGeometry | 内边距,Geometry表示抽象类,使用例子:EdgeInsets.all() |
reverse: bool | 组件反向布局 |
实际上,ListView中的children一般使用ListTile()组件。它相当于ListView中的一个小单元(因为列表内容整体样式一般是统一的,只不过是内容不同)
body: ListView(
children: const <Widget>[
ListTile(),
//间隔线
Divider(),
],
),
- ListTile()常用参数
参数名称 | 使用 |
---|---|
leading: Widget | tile最前面的组件(比如放置一个图标) |
title: Widget | 标题 |
subtitle: Widget | 副标题 |
trailing:Widget | tile最后面的组件 |
body: ListView(
children: const <Widget>[
ListTile(
title: Text('标题'),
leading: Icon(MyFont.a1),
subtitle: Text('副标题'),
trailing: Icon(MyFont.a2),
),
Divider(),
ListTile(
title: Text('标题2'),
leading: Icon(MyFont.a1),
subtitle: Text('副标题2'),
trailing: Icon(MyFont.a2),
),
Divider(),
ListTile(
title: Text('标题3'),
leading: Icon(MyFont.a1),
subtitle: Text('副标题3'),
trailing: Icon(MyFont.a2),
),
Divider(),
],
),
效果如图:
ListView动态列表
实际场景中,ListView中的数据都应该是动态的,那么,动态列表如何生成?
方法1 使用for循环来生成一个动态列表
ListView()接受一个List
List<Widget> initListData() {
List<Widget> list = [];
for(var i = 0; i < 20; ++i) {
list.add(ListTile(
title: Text('标题$i'),
subtitle: Text('副标题$i'),
));
}
return list;
}
然后在children中调用:
body: ListView(
children: initListData(),
),
如图所示:
方法2 使用ListView.builder()来生成一个动态列表
ListView.builder()可以快速的构建一个动态列表,非常常用。该方法至少需要接受两个参数:
参数名称 | 使用 |
---|---|
itemCount: int | 列表的长度 |
itemBuilder: IndexedWidgetBuilder | 列表单元的构造器,函数类型,具体见下方用法 |
代码如下:
//注意,该类中有动态数据,实际上不应该继承StatelessWidget,应该继承StatefulWidget中
class MyListViewBuilderApp extends StatelessWidget {
List<String> list = [];
MyListViewBuilderApp({Key? key}) : super(key: key) {
for(var i = 0; i < 20; ++i) {
list.add('我是第$i条数据');
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('AppBar Title'),
),
body: ListView.builder(
itemCount: list.length,
//一个函数,接受两个参数,返回Widget
itemBuilder: (context, index) {
return ListTile(
title: Text(list[index]),
);
},
),
),
);
}
}
效果如下:
以上部分内容总结自课程 https://www.bilibili.com/video/BV1S4411E7LY
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!