针对开发中涉及到列表展示数据，flutter提供了listview组件来完整列表展示的功能；
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(alignment: Alignment.center, child:ListView(
children: [
],
));
}
从上编代码可以看出listview接受的参数是一个widget的数组，即在此数组中所包含的元素必须为组件（Container,Text,Image,ListTile等等）
- 静态数据展示
简单数据列表的展示，实现简单文本信息的：
/**
* listview组件为简单的组件
* 例如：
* container，text，image
*/
ListView _getNormalListView() {
return ListView(
children: [
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
],
);
}
定义简单方法，返回值为ListView，在代码中Widget数组中班汉多个简单的组件（Text）;如果在列表中想实现简单的提问混排，则使用ListTile就可以实现：
/**
* listview组件元素为ListTile
* ListTile：可以实现图文混排的效果
*/
ListView _getListTileListView() {
return ListView(
children: [
ListTile(
title: Text("组件为ListTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("组件为ListTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("组件为ListTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("组件为ListTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("组件为ListTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("组件为ListTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("组件为ListTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("组件为ListTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
)
],
);
}
介于列表的数据比较多，手动的去拼接是一件比较费时间，精力的事情，我们这里可以使用循环的方式来实现数据的构造：
/**
* 利用for循环进行展示数据的拼接->静态数据
*/
List _getStaticWidgets() {
List list = new List();
for (var i = 0; i < 20; i++) {
list.add(ListTile(
title: Text("这是循环得到的标题$i"),
subtitle: Text("这是循环得到的自标题$i"),
));
}
return list;
}
通过for循环我们就可以迅速的完成多条数据的生成，并且将数据赋值到组件上在Listview
上进行展示；
- 动态数据展示
以上的数据展示都是简单的静态的数据，接下来我们模拟服务其请求数据，展示在列表伤的操作，在项目根目录创建模拟数据：
List listData = [
{"title": "《西游记》", "author": "吴承恩"},
{"title": "《水浒传》", "author": "施耐庵"},
{"title": "《三国演义》", "author": "罗贯中"},
{"title": "《红楼梦》", "author": "曹雪芹"},
{"title": "《大学》", "author": "曾参"},
{"title": "《中庸》", "author": "子思"},
{"title": "《论语》", "author": "孔子"},
{"title": "《孟子》", "author": "孟子"},
];
我们可以讲上述的数据展示在ListView列表上：
1.常规方法展示
/**
* 利用for循环进行展示数据的拼接->动态数据
*/
List _getDynamicWidget() {
var tempList = listData.map((value) {
return ListTile(
title: Text(value["title"]),
subtitle: Text(value["author"]),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
);
});
return tempList.toList();
}
我们将listData数据迭代遍历，并且在遍历过程中将数据赋值给组件ListTile上；
2.通过 ListView.builder（）的方式来
/**
* listview.builder()操作展示数据
*/
ListView _getListViewByBuilder(BuildContext context) {
return ListView.builder(
itemCount: this.list.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(list[index]["title"]),
subtitle: Text(list[index]["author"]),
);
});
}
- itemCount 数组的长度
- itemBuilder 每一个listview条目赋值的操作
1.context: 重写父类方法是build（）的入参；
2.index : 是遍历集合的角标值
这里itemBuilder: (context, index)为什么这么写，还是有疑问的，初学带问号，先记着，待以后解决！至此listview垂直方向展示数据已完成，而水平方向列表只需在ListView如参数中添加参数scrollDirection: Axis.horizontal就可以实现水平方向的列表！