5 列表组件

列表是前端是最常见的需求。在Flutter中,用ListView来显示列表项,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向,列表有以下分类: •水平的列表 •垂直的列表 •数据量非常大的列表 •矩阵式的列表

5.1 基础列表组件

基础列表组件为ListView组件,其常用属性见表4-8。 示例代码如下:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final title = "基础列表示例";

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        //添加基础列表
        body: new ListView(
          //添加静态数据
          children: <Widget>[
            ListTile(
              //添加图标
              leading: Icon(Icons.alarm),
              //添加文本
              title: Text('Alarm'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
            ListTile(
              leading: Icon(Icons.airplay),
              title: Text('Airplay'),
            ),
            ListTile(
              leading: Icon(Icons.airplay),
              title: Text('Airplay'),
            ),
            ListTile(
              leading: Icon(Icons.airplay),
              title: Text('Airplay'),
            ),
            ListTile(
              leading: Icon(Icons.airplay),
              title: Text('Airplay'),
            ),
            ListTile(
              leading: Icon(Icons.alarm),
              title: Text('Alarm'),
            ),
            ListTile(
              leading: Icon(Icons.alarm),
              title: Text('Alarm'),
            ),
            ListTile(
              leading: Icon(Icons.alarm),
              title: Text('Alarm'),
            ),
            ListTile(
              leading: Icon(Icons.alarm),
              title: Text('Alarm'),
            ),
            ListTile(
              leading: Icon(Icons.alarm),
              title: Text('Alarm'),
            ),
          ],
        ),
      ),

    );
  }
} 

上述示例代码视图展现大致如图4-8所示。

5.2 水平列表组件

水平列表组件即为水平方向排列的组件,列表内部元素以水平方向排。把ListView组件的scrollDirection属性设置为Axis.horiozntal即可。 示例代码如下:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = "水平列表示例";

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          height: 200.0,
          child: ListView(
            //设置水平方向排列
            scrollDirection: Axis.horizontal,
            //添加子元素
            children: <Widget>[
              Container(
                width: 160.0,
                color: Colors.lightBlue,
              ),
              Container(
                width: 160.0,
                color: Colors.amber,
              ),
              Container(
                width: 160.0,
                color: Colors.green,
                child: Column(
                  children: <Widget>[
                    Text(
                      '水平',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 36.0,
                      ),
                    ),
                    Text(
                      '列表',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 36.0,
                      ),
                    ),
                    Icon(Icons.list),
                  ],
                ),
              ),
              Container(
                width: 160.0,
                color: Colors.deepPurpleAccent,
              ),
              Container(
                width: 160.0,
                color: Colors.black,
              ),
              Container(
                width: 160.0,
                color: Colors.pinkAccent,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

上述示例代码视图展现大致如图4-9所示。

5.3 长列表组件

当列表的数据项非常多时,需要使用长列表,比如淘宝后台订单列表、手机通讯录等,这些列表项数据很多。长列表也是使用ListView作为基础组件,只不过需要添加一个列表项构造器itemBuilder。 接下来通过一个示例来说明itemBuilder的用法,代码如下:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp(
  //使用generate方法产生500条数据
  items: new List<String>.generate(500, (i) => "Item $i"),
));

class MyApp extends StatelessWidget {

  //列表数据集
  final List<String> items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = "长列表示例";

    return MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(title),
        ),
        //使用ListView.builder来构造列表项
        body: new ListView.builder(
          //列表长度
          itemCount: items.length,
          //列表项构造器
          itemBuilder: (context,index) {
            return new ListTile(
              leading: new Icon(Icons.phone),
              title: new Text('${items[index]}'),
            );
          },
        ),
      ),
    );
  }
}

上述示例代码视图展现大致如图4-10所示。

5.4 网格列表组件

数据量很大时用矩阵方式排列比较清晰,此时用网格列表组件,即为GridView组件,可以实现多行多列的应用场景。使用GridView创建网格列表有多种方式: •GridView.count通过单行展示个数创建GridView。 •GridView.extent通过最大宽度创建GridView。 网格列表组件的属性参见表4-9。 接下来,我们选取GridView.count来创建风格列表,示例代码如下:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final title = "网格列表示例";

    return new MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(title),
        ),
        //使用GridView.count构建网格
        body: new GridView.count(
          primary: false,
          //四周增加一定的空隙
          padding: const EdgeInsets.all(20.0),
          crossAxisSpacing: 30.0,
          //一行上放三列数据
          crossAxisCount: 3,
          //数据项 五行三列
          children: <Widget>[
            const Text('第一行第一列'),
            const Text('第一行第二列'),
            const Text('第一行第三列'),
            const Text('第二行第一列'),
            const Text('第二行第二列'),
            const Text('第二行第三列'),
            const Text('第三行第一列'),
            const Text('第三行第二列'),
            const Text('第三行第三列'),
            const Text('第二行第三列'),
            const Text('第三行第一列'),
            const Text('第三行第二列'),
            const Text('第三行第三列'),
            const Text('第三行第三列'),
            const Text('第三行第三列'),
          ],
        ),
      ),
    );
  }
}

上述示例代码视图展现大致如图4-11所示。