ListView
属性 | 释义 |
---|
scrollDirection | Axis.horizoontal 水平 |
padding | 内边距 |
resolve | 组件反向排序 |
children | 列表元素 |
垂直列表
// 默认为垂直列表
// leading : 类似每个item的头像
// title : item标题
// subtitle: item的副标题
// trailing: I尾部图片
return ListView(
padding: EdgeInsets.all(10),
children: <Widget>[
ListTile(
leading: Image.network(
"https://www.baidu.com/img/dong3_ce6e6a5ce66ab92f491f627981a2f77c.gif"),
title: Text('title'),
subtitle: Text("subtitle"),
),
ListTile(
leading: Image.network(
"https://www.baidu.com/img/dong3_ce6e6a5ce66ab92f491f627981a2f77c.gifg"),
title: Text('title'),
subtitle: Text("subtitle"),
),
ListTile(
title: Text('title'),
subtitle: Text("subtitle"),
trailing: Icon(Icons.home),
),
ListTile(
leading: Icon(Icons.pages),
title: Text('title'),
subtitle: Text("subtitle"),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('title'),
subtitle: Text("subtitle"),
),
ListTile(
leading: Icon(
Icons.home,
color: Colors.yellow,
),
title: Text('title'),
subtitle: Text("subtitle"),
),
ListTile(
leading: Icon(Icons.pages),
title: Text('title'),
subtitle: Text("subtitle"),
)
],
);
// 水平列表
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,
),
],
);
动态列表
eg1:从组件数组中获取item组件
class HomeContent extends StatelessWidget {
List<Widget> _getData() {
return [
ListTile(
title: Text("1"),
),
ListTile(
title: Text("2"),
),
ListTile(
title: Text("3"),
)
];
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: _getData()
);
}
}
eg2: 从组件数组中获取组件
class HomeContent extends StatelessWidget {
List<Widget> _getData() {
List<Widget> list = new List();
for(var i = 0; i<20;i++) {
list.add(ListTile(
title: Text("$i"),
));
}
return list;
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: _getData()
);
}
}
eg3: 从外部数据获取item数据
- 首先在lib目录下创建文件夹res
- 在res文件夹下创建listData.dart
List listData=[
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
},
{
"title": 'Childhood in a picture',
"author": 'Google',
"imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
},
{
"title": 'Alibaba Shop',
"author": 'Alibaba',
"imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
},
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
},
{
"title": 'Tornado',
"author": 'Mohamed Chahin',
"imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
},
{
"title": 'Undo',
"author": 'Mohamed Chahin',
"imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
},
{
"title": 'white-dragon',
"author": 'Mohamed Chahin',
"imageUrl": 'https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
}
];
class HomeContent extends StatelessWidget {
List<Widget> _getData() {
var tempList = listData.map((value){
return ListTile(
leading: Image.network(value["imageUrl"]),
title: Text(value["title"]),
subtitle: Text(value["author"]),
);
});
return tempList.toList();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: _getData()
);
}
}
eg4: 使用ListView.builder创建ListView
Widget _getData(context, index) {
return ListTile(
title: Text(listData[index]["title"]), // 从listData中获取title
leading: Image.network(listData[index]["imageUrl"]), // 从listData中获取leading
subtitle: Text(listData[index]["author"]), // 从listData中获取subtitle
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount: listData.length,
itemBuilder: this._getData);
}