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

推荐阅读更多精彩内容