ListView组件用于显示一个列表，在基于Flutter的开源中国客户端App中，新闻列表、动弹列表等都需要用到ListView，一个最简单的ListView可以用如下代码实现：
import 'package:flutter/material.dart';
void main() {
List<Widget> items = new List();
for (var i = 0; i < 20; i++) {
items.add(new Text("List Item $i"));
}
runApp(new MaterialApp(
title: "Text Demo",
home: new Scaffold(
appBar: new AppBar(
title: new Text("Text Demo"),
),
body: new Center(
child: new ListView(children: items)
),
),
));
}
运行上面的代码，结果如下图所示：
image.png
这样的ListView显示不是我们需要的，太难看，每个item没有边距而且没有分割线，所以我们用下面的代码改造一下：
import 'package:flutter/material.dart';
void main() {
// 装有ListView中所有item的集合
List<Widget> items = new List();
for (var i = 0; i < 20; i++) {
var text = new Text("List Item $i");
// Padding也是一个Widget，是一个有内边距的容器，可以装其他Widget
items.add(new Padding(
// 内边距设置为15.0，上下左右四边都是15.0
padding: const EdgeInsets.all(15.0),
// Padding容器中装的是Text组件
child: text
));
}
runApp(new MaterialApp(
title: "Text Demo",
home: new Scaffold(
appBar: new AppBar(
title: new Text("Text Demo"),
),
body: new Center(
// build是ListView提供的静态方法，用于创建ListView
child: new ListView.builder(
// itemCount是ListView的item个数，这里之所以是items.length * 2是因为将分割线也算进去了
itemCount: items.length * 2,
itemBuilder: (context, index) {
// 如果index为奇数，则返回分割线
if (index.isOdd) {
return new Divider(height: 1.0);
}
// 这里index为偶数，为了根据下标取items中的元素，需要对index做取整
index = index ~/ 2;
return items[index];
},
)
)
),
));
}
此时再次运行上面的代码，UI就好看多了：
image.png
