垂直列表
代码语言：javascript复制ListView(
children: <Widget>[
//ListTile是ListView子元素的一个内嵌模式，其类似于OC中的内嵌固定模式的cell
ListTile(
title: Text("标题1"),
subtitle: Text("详细信息1..."),
leading: Icon(
Icons.settings,
color: Colors.yellow,
size: 10,
),
trailing: Icon(Icons.face)),
ListTile(
title: Text("标题2"),
subtitle: Text("详细信息2..."),
leading: Icon(Icons.ac_unit, color: Colors.red, size: 20),
trailing: Image.network(
"http://pic51.nipic.com/file/20141029/6470615_135409321000_2.jpg")),
ListTile(
title: Text("标题3"),
subtitle: Text("详细信息3..."),
leading: Icon(Icons.backspace, color: Colors.orange, size: 30)),
Image.network(
"http://pic14.nipic.com/20110603/7658638_151231191000_2.jpg"),
Container(
height: 10,
color: Colors.red,
),
Image.network(
"http://pic62.nipic.com/file/20150318/8684504_093611837474_2.jpg"),
], //配置ListView列表子元素
padding: EdgeInsets.all(10), //设置ListView的内边距
);ListView的children属性的值是一个Widget数组，该数组里面装载的就是ListView里面展示的各个子元素。
ListView的子元素可以是任何类型的Widget，可以是Text、可以是Image、也可以是Container，也可以是ListTile。
ListTile是Flutter内置的用于作为ListView子元素的widget，其类似于OC中的内置cell。
Container可用于设置ListView各个子元素之间的间隔。
效果如下：
水平列表
代码语言：javascript复制Container(
height: 180,
child: ListView(
children: <Widget>[
Container(
width: 180,
color: Colors.red,
child: ListView(
children: <Widget>[
Image.network("http://pic33.nipic.com/20131010/10391882_093034327358_2.jpg"),
Text("公司简介")
],
),
),
Container(
width: 180,
color: Colors.blue,
),
Container(
width: 180,
color: Colors.green,
),
Container(
width: 180,
color: Colors.brown,
),
Container(
width: 180,
color: Colors.yellow,
),
],
padding: EdgeInsets.all(10),
scrollDirection: Axis.horizontal,//通过该参数配置是水平还是垂直
),
);通过ListView的scrollDirection属性可以配置该ListView是水平还是垂直的。
ListView的元素里面还可以嵌套其他的元素：
代码语言：javascript复制Container(
width: 180,
color: Colors.red,
child: ListView(
children: <Widget>[
Image.network("http://pic33.nipic.com/20131010/10391882_093034327358_2.jpg"),
Text("公司简介")
],
),
),效果图如下：
动态列表
所谓动态列表，其实就是根据数据来控制列表的内容展示。
首先，我们自己创建一个JSON数据数组，放在NormanDatas.dart文件中：
代码语言：javascript复制//NormanDatas.dart文件
List listData = [
{
"title":"title1",
"detail":"detail1",
"imgUrl":"http://pic38.nipic.com/20140217/7643674_131828170000_2.jpg"
},
{
"title":"title2",
"detail":"detail2",
"imgUrl":"http://pic23.nipic.com/20120815/7976459_193605074324_2.jpg"
},
{
"title":"title3",
"detail":"detail3",
"imgUrl":"http://pic17.nipic.com/20111101/3094309_171235018306_2.jpg"
},
{
"title":"title4",
"detail":"detail4",
"imgUrl":"http://pic36.nipic.com/20131216/7205248_104247058321_2.jpg"
},
{
"title":"title5",
"detail":"detail5",
"imgUrl":"http://pic27.nipic.com/20130129/11900941_205032216185_2.jpg"
},
{
"title":"title6",
"detail":"detail6",
"imgUrl":"http://pic36.nipic.com/20131206/9885883_193903882000_2.jpg"
},
{
"title":"title7",
"detail":"detail7",
"imgUrl":"http://pic18.nipic.com/20120114/7303631_154218056334_2.jpg"
},
{
"title":"title8",
"detail":"detail8",
"imgUrl":"http://pic26.nipic.com/20130116/6647776_154516318110_2.jpg"
},
{
"title":"title9",
"detail":"detail9",
"imgUrl":"http://pic32.nipic.com/20130822/11918471_133412467197_2.jpg"
},
{
"title":"title10",
"detail":"detail10",
"imgUrl":"http://pic24.nipic.com/20120922/10614245_073225718000_2.jpg"
}
];使用代码如下：
代码语言：javascript复制import 'resource/NormanDatas.dart';
class HomeContent extends StatelessWidget {
List<Widget> _getDatas() {
List<Widget> datas = new List();
for (var i = 0; i < listData.length; i ) {
Map map = listData[i];
datas.add(ListTile(
title: Text(map["title"]),
subtitle: Text(map["detail"]),
leading: Image.network(map["imgUrl"]),
));
}
return datas;
}
@override
Widget build(BuildContext context) {
return ListView(
children: this._getDatas(),
);
}
}这里我定义了一个私有的方法 _getDatas 用来生成ListView的子元素们。
然后在私有方法 _getDatas 中循环遍历数据源listData，然后依次生成对应的ListTile。
实际上，上述代码中的_getDatas方法：
代码语言：javascript复制 List<Widget> _getDatas() {
List<Widget> datas = new List();
for (var i = 0; i < listData.length; i ) {
Map map = listData[i];
datas.add(ListTile(
title: Text(map["title"]),
subtitle: Text(map["detail"]),
leading: Image.network(map["imgUrl"]),
));
}
return datas;
}可以利用List的map方法来进行简化，简化后的代码如下：
代码语言：javascript复制 List<Widget> _getDatas() {
var datas = listData.map((value){
return ListTile(
title: Text(value["title"]),
subtitle: Text(value["detail"]),
leading: Image.network(value["imgUrl"]),
);
});
return datas.toList();
}需要注意的一点是，List的map方法用于遍历处理List中的每一个元素。
实际上，针对固定格式的子元素，ListView给我们提供了ListView.builder 方法，用于遍历处理每一个子元素，代码如下：
代码语言：javascript复制 ListView.builder(
itemBuilder: (context, index){
Map value = listData[index];
return ListTile(
title: Text(value["title"]),
subtitle: Text(value["detail"]),
leading: Image.network(value["imgUrl"]),
);
},
);以上。
