ListView組件用于顯示一個列表，在基于Flutter的開源中國客戶端App中，新聞列表、動彈列表等都需要用到ListView，一個最簡單的ListView可以用如下代碼實現(xiàn)：

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)
      ),
    ),
  ));
}

運(yùn)行上面的代碼，結(jié)果如下圖所示：

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，是一個有內(nèi)邊距的容器，可以裝其他Widget
    items.add(new Padding(
      // 內(nèi)邊距設(shè)置為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提供的靜態(tài)方法，用于創(chuàng)建ListView
        child: new ListView.builder(
          // itemCount是ListView的item個數(shù)，這里之所以是items.length * 2是因為將分割線也算進(jìn)去了
          itemCount: items.length * 2,
          itemBuilder: (context, index) {
            // 如果index為奇數(shù)，則返回分割線
            if (index.isOdd) {
              return new Divider(height: 1.0);
            }
            // 這里index為偶數(shù)，為了根據(jù)下標(biāo)取items中的元素，需要對index做取整
            index = index ~/ 2;
            return items[index];
          },
        )
      )
    ),
  ));
}

此時再次運(yùn)行上面的代碼，UI就好看多了：

image.png