Flutter 列表组件

Flutter 列表组件(ListView)，列表在前端是常用的组件。在Flutter中，用ListView组件应用示例来显示列表项，支持垂直和水平方向展示，通过一个属性我们就可以控制其方向。列表有以下分类：

• 水平的列表
• 垂直的列表
• 数据量非常大的列表
• 矩阵式的列表

基础列表组件

基础列表组件为ListView组件，其常用属性见表:

示例代码如下：

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: ListView(
          // 添加静态数据
          children: <Widget>[
              // ListTile是一种样式相对固定的列表项，比如微信的“发现”页面
              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'),
                  ),
                ],
              ),
            ),
          );
      }
    }

上述示例代码视图展现大致如图所示:

水平列表组件

水平列表组件即为列表内部元素以水平方向排列的组件。把ListView组件的scrollDirection属性设置为Axis.horizontal即可。

示例代码如下：

import 'package:flutter/material.dart';

void main() => runApp(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(
      // 顶部外边距为20
      margin: EdgeInsets.symmetric(vertical: 20.0),
      // 设定容器高度
      height: 200.0,
      child: ListView(
          // 设置水平方向排列
          scrollDirection: Axis.horizontal,
          // 添加子元素
          children: <Widget>[
            // 每个Container即为一个列表项
            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,
                    ),
                  ],
                ),
            ),
          ),
        );
      }
    }

上述示例代码视图展现大致如图所示:

长列表组件

当列表的数据项非常多时，需要使用长列表，比如淘宝后台订单列表、手机通讯录等，这些列表项数据很多。长列表也是使用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: Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          // 使用ListView.builder来构造列表项
          body: ListView.builder(
            // 列表长度
            itemCount: items.length,
            // 列表项构造器：context为上下文，index表示列表项索引
            itemBuilder: (context,index) {
              // 返回列表项
              return ListTile(
                // 左侧图标
                leading: Icon(Icons.phone),
                // 文本内容
                title: Text('${items[index]}'),
              );
            },
          ),
        ),
      );
    }
  }

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

网格列表组件

数据量很大时用矩阵方式排列列表元素会比较清晰，此时用网格列表组件（GridView），可以实现多行多列的应用场景。使用GridView创建网格列表有多种方式：

• GridView.count：通过单行展示个数创建GridView。
• GridView.extent：通过最大宽度创建GridView。

网格列表组件的属性参见表:

接下来，我们选取GridView.count来创建风格列表，示例代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

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

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        // 使用GridView.count构建网格
        body: 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('第五行第三列'),
          ],
        ),
      ),
    );
  }
}

上述示例代码视图展现如图所示: