10、listview组件

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