ListView列表组件_flutter
列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过 ListView 来定义 列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。
分类：
- 垂直列表
- 垂直图文列表
- 水平列表
- 动态列表
- 矩阵式列表
列表参数
| 名称 |
类型 |
说明 |
| scrollDirection |
Axis |
Axis.horizontal水平列表 Axis.vertical 垂直列表(默认) |
| padding |
EdgeInsetsGeometry |
内边距 |
| resolve |
bool |
组件反向排序 |
| children |
List
|
列表元素:children: <Widget>[] |
垂直列表(默认)
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
padding: EdgeInsets.all(10),
//列表子元素
children: <Widget>[
//可以使用任意组件,子元素一般使用ListTile
ListTile(
//图标
leading: Icon(
Icons.settings,
size: 40,
color: Colors.lightBlue,
),
title: Text(
//标题
'华北黄淮高温持续 南方强降雨今起强势登场',
style: TextStyle(fontSize: 24),
),
//subtitle二级标题
subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
),
ListTile(
leading: Icon(Icons.home, size: 40),
title: Text(
'中国13家运营波音737MAX航空公司均已提出索赔场',
style: TextStyle(fontSize: 24),
),
subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
),
ListTile(
title: Text('华中国13家运营波音737MAX航空公司均已提出索赔登场'),
subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
//后面加图标
trailing: Icon(Icons.access_alarm),
),
//图片
ListTile(
title: Text('华北黄淮高温雨今起强势登场'),
subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
),
ListTile(
leading: Image.network(
"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"),
title: Text('华北黄淮高温持续 势登场'),
subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
),
],
);
}
}
53
1
class HomeContent extends StatelessWidget {
2
@override
3
Widget build(BuildContext context) {
4
// TODO: implement build
5
return ListView(
6
padding: EdgeInsets.all(10),
7
//列表子元素
8
children: <Widget>[
9
//可以使用任意组件,子元素一般使用ListTile
10
ListTile(
11
//图标
12
leading: Icon(
13
Icons.settings,
14
size: 40,
15
color: Colors.lightBlue,
16
),
17
title: Text(
18
//标题
19
'华北黄淮高温持续 南方强降雨今起强势登场',
20
style: TextStyle(fontSize: 24),
21
),
22
//subtitle二级标题
23
subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
24
),
25
ListTile(
26
leading: Icon(Icons.home, size: 40),
27
title: Text(
28
'中国13家运营波音737MAX航空公司均已提出索赔场',
29
style: TextStyle(fontSize: 24),
30
),
31
subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
32
),
33
ListTile(
34
title: Text('华中国13家运营波音737MAX航空公司均已提出索赔登场'),
35
subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
36
//后面加图标
37
trailing: Icon(Icons.access_alarm),
38
),
39
//图片
40
ListTile(
41
title: Text('华北黄淮高温雨今起强势登场'),
42
subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
43
),
44
ListTile(
45
leading: Image.network(
46
"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"),
47
title: Text('华北黄淮高温持续 势登场'),
48
subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
49
),
50
],
51
);
52
}
53
}
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
padding: EdgeInsets.all(10),
children: <Widget>[
//放置不同的组件。
Image.network("https://www.itying.com/images/flutter/1.png"),
Container(
child: Text(
'我是一个标题',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
),
),
height: 60,
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
),
Image.network("https://www.itying.com/images/flutter/3.png"),
Container(
child: Text(
'我是一个标题',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
),
),
height: 60,
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
),
Image.network("https://www.itying.com/images/flutter/1.png"),
Image.network("https://www.itying.com/images/flutter/1.png"),
],
);
}
}
40
1
class HomeContent extends StatelessWidget {
2
@override
3
Widget build(BuildContext context) {
4
// TODO: implement build
5
return ListView(
6
padding: EdgeInsets.all(10),
7
children: <Widget>[
8
//放置不同的组件。
9
Image.network("https://www.itying.com/images/flutter/1.png"),
10
Container(
11
child: Text(
12
'我是一个标题',
13
textAlign: TextAlign.center,
14
style: TextStyle(
15
fontSize: 28,
16
),
17
),
18
height: 60,
19
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
20
),
21
22
Image.network("https://www.itying.com/images/flutter/3.png"),
23
Container(
24
child: Text(
25
'我是一个标题',
26
textAlign: TextAlign.center,
27
style: TextStyle(
28
fontSize: 28,
29
),
30
),
31
height: 60,
32
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
33
),
34
35
Image.network("https://www.itying.com/images/flutter/1.png"),
36
Image.network("https://www.itying.com/images/flutter/1.png"),
37
],
38
);
39
}
40
}
水平列表
在水平列表中高度会自动填充满,想要设置高度,要在ListView设置
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 180,
child: ListView(
//水平列表,在水平列表中高度会自动填充满,想要设置高度,要在ListView设置
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 180.0,
color: Colors.red,
),
Container(
width: 180.0,
color: Colors.orange,
child: ListView(//二级列表
children: <Widget>[
Image.network("https://www.itying.com/images/flutter/1.png"),
Text('我是一个文本')
],
),
),
Container(
width: 180.0,
color: Colors.blue,
),
Container(
width: 180.0,
color: Colors.deepOrange,
),
Container(
width: 180.0,
color: Colors.deepPurpleAccent,
),
],
),
);
}
}
41
1
class HomeContent extends StatelessWidget {
2
@override
3
Widget build(BuildContext context) {
4
// TODO: implement build
5
return Container(
6
height: 180,
7
child: ListView(
8
//水平列表,在水平列表中高度会自动填充满,想要设置高度,要在ListView设置
9
scrollDirection: Axis.horizontal,
10
children: <Widget>[
11
Container(
12
width: 180.0,
13
color: Colors.red,
14
),
15
Container(
16
width: 180.0,
17
color: Colors.orange,
18
child: ListView(//二级列表
19
children: <Widget>[
20
Image.network("https://www.itying.com/images/flutter/1.png"),
21
Text('我是一个文本')
22
],
23
),
24
),
25
Container(
26
width: 180.0,
27
color: Colors.blue,
28
),
29
Container(
30
width: 180.0,
31
color: Colors.deepOrange,
32
),
33
Container(
34
width: 180.0,
35
color: Colors.deepPurpleAccent,
36
),
37
],
38
),
39
);
40
}
41
}
动态列表（动态循环数据）
在lib中创建一个res文件夹,创建一个dart文件,放置静态list
List listData=[
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/1.png',
},
{
"title": 'Childhood in a picture',
"author": 'Google',
"imageUrl": 'https://www.itying.com/images/flutter/2.png',
},
{
"title": 'Alibaba Shop',
"author": 'Alibaba',
"imageUrl": 'https://www.itying.com/images/flutter/3.png',
},
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/4.png',
},
{
"title": 'Tornado',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/5.png',
},
{
"title": 'Undo',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/6.png',
},
{
"title": 'white-dragon',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/7.png',
}
];
38
1
List listData=[
2
{
3
"title": 'Candy Shop',
4
"author": 'Mohamed Chahin',
5
"imageUrl": 'https://www.itying.com/images/flutter/1.png',
6
},
7
{
8
"title": 'Childhood in a picture',
9
"author": 'Google',
10
"imageUrl": 'https://www.itying.com/images/flutter/2.png',
11
},
12
{
13
"title": 'Alibaba Shop',
14
"author": 'Alibaba',
15
"imageUrl": 'https://www.itying.com/images/flutter/3.png',
16
},
17
{
18
"title": 'Candy Shop',
19
"author": 'Mohamed Chahin',
20
"imageUrl": 'https://www.itying.com/images/flutter/4.png',
21
},
22
{
23
"title": 'Tornado',
24
"author": 'Mohamed Chahin',
25
"imageUrl": 'https://www.itying.com/images/flutter/5.png',
26
},
27
{
28
"title": 'Undo',
29
"author": 'Mohamed Chahin',
30
"imageUrl": 'https://www.itying.com/images/flutter/6.png',
31
},
32
{
33
"title": 'white-dragon',
34
"author": 'Mohamed Chahin',
35
"imageUrl": 'https://www.itying.com/images/flutter/7.png',
36
}
37
38
];
在main中引入,显示
方法1:children
class HomeContent extends StatelessWidget {
//自定义方法,显示动态列表
List<Widget> _getListData() {
var list=listData.map((value){//map返回的是(),不是list
return ListTile(
title:Text(value["title"]),
leading: Image.network(value["imageUrl"]),
subtitle: Text(value["author"])
);
});
return list.toList();
}
@override
Widget build(BuildContext context) {
return ListView(
children: this._getListData(),
);
}
}
20
1
class HomeContent extends StatelessWidget {
2
//自定义方法,显示动态列表
3
List<Widget> _getListData() {
4
var list=listData.map((value){//map返回的是(),不是list
5
return ListTile(
6
title:Text(value["title"]),
7
leading: Image.network(value["imageUrl"]),
8
subtitle: Text(value["author"])
9
);
10
});
11
return list.toList();
12
}
13
14
@override
15
Widget build(BuildContext context) {
16
return ListView(
17
children: this._getListData(),
18
);
19
}
20
}
方法2:builder
class HomeContent extends StatelessWidget {
//自定义方法,显示动态列表
Widget _getListData(context, index) {
return ListTile(
title: Text(listData[index]["title"]),
leading: Image.network(listData[index]["imageUrl"]),
subtitle: Text(listData[index]["author"])
);
}
@override
Widget build(BuildContext context) {
//使用build
return ListView.builder(
//数据长度
itemCount: listData.length,
//每一个数据的内容,会传入 上下文context和下标index
itemBuilder: this._getListData);
}
}x
1
class HomeContent extends StatelessWidget {
2
//自定义方法,显示动态列表
3
Widget _getListData(context, index) {
4
return ListTile(
5
title: Text(listData[index]["title"]),
6
leading: Image.network(listData[index]["imageUrl"]),
7
subtitle: Text(listData[index]["author"])
8
);
9
}
10
11
@override
12
Widget build(BuildContext context) {
13
//使用build
14
return ListView.builder(
15
//数据长度
16
itemCount: listData.length,
17
//每一个数据的内容,会传入 上下文context和下标index
18
itemBuilder: this._getListData);
19
}
20
}
