ListView組件用于顯示一個(gè)列表，在基于Flutter的開(kāi)源中國(guó)客戶端App中，新聞列表、動(dòng)彈列表等都需要用到ListView，一個(gè)最簡(jiǎn)單的ListView可以用如下代碼實(shí)現(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顯示不是我們需要的，太難看，每個(gè)item沒(méi)有邊距而且沒(méi)有分割線，所以我們用下面的代碼改造一下：

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也是一個(gè)Widget，是一個(gè)有內(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個(gè)數(shù)，這里之所以是items.length * 2是因?yàn)閷⒎指罹€也算進(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中的元素，需要對(duì)index做取整
            index = index ~/ 2;
            return items[index];
          },
        )
      )
    ),
  ));
}

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

image.png