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
