9 列表及表格布局

Flutter中列表和表格的布局方式有多种,本节将介绍这类组件。

9.1 ListView

ListView布局是一种常用的布局方式,ListView结合ListTitle可以布局出一些复杂的列表界面。 具体示例代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'ListView布局示例',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    List<Widget> list = <Widget>[
      new ListTile(
        title: new Text('广州市黄埔大道建中路店',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),),
        subtitle: new Text('广州市福黄埔大道建中路3号'),
        leading: new Icon(
          Icons.fastfood,
          color: Colors.orange,
        ),
      ),
      new ListTile(
        title: new Text('广州市白云区机场路白云机场店',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),),
        subtitle: new Text('广州市白云区机场路T3航站楼'),
        leading: new Icon(
          Icons.airplay,
          color: Colors.blue,
        ),
      ),
      new ListTile(
        title: new Text('广州市中山大道中山大学附属医院',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),),
        subtitle: new Text('广州市中山大道45号'),
        leading: new Icon(
          Icons.local_hospital,
          color: Colors.green,
        ),
      ),
      new ListTile(
        title: new Text('广州市天河区太平洋数码城',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),),
        subtitle: new Text('广州市天河区岗顶太平洋数码城'),
        leading: new Icon(
          Icons.computer,
          color: Colors.deepPurple,
        ),
      ),
    ];

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('ListView布局示例'),
      ),
      body: new Center(
        child: new ListView(
          children: list,
        ),
      ),
    );
  }
}

上述示例代码的视图展现大致如图7-33所示。 ListView还可以实现长文本的滚动效果,一般可用于页面内容较多的场景。示例代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: '滚动布局示例',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('滚动布局示例'),
      ),
      body:new ListView(
        children: <Widget>[
          new Center(
            child: new Text(
              '
广州天河区公园',
              style: new TextStyle(
                fontSize:30.0,
              ),
            ),
          ),
          new Center(
            child: new Text(
              '天河公园',
              style: new TextStyle(
                fontSize: 16.0,
              ),
            ),
          ),
          new Center(
            child: new Text(
              '''天河公园,是区属综合性公园,位于广州天河区员村,西靠天府路,南连黄埔大道,北接中山大道,来往交通十分便利。公园总面积为70.7公顷,水体面积占10公顷。天河公园以自然生态景观为主要特色,公园规划为五个功能区:百花园景区、文体娱乐区、老人活动区、森林休憩区、后勤管理区。
              ''',
              style: new TextStyle(
                fontSize: 14.0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

上述示例代码的视图展现大致如图7-34所示。

9.2 GridView

GridView布局即为网格布局,通常用来布局多行多列的情况。接下来编写一个GridView布局的九宫格小例子。具体步骤如下: 1)在helloworld工程下需要添加9张图片,具体添加过程请参考7.1.4节Align对齐布局添加步骤。 2)编写GridView九宫格示例代码,完整的示例代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'GridView九宫格示例',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //使用generate构造图片列表
    List<Container> _buildGridTitleList(int count) {
      return new List<Container>.generate(
          count,
              (int index) => new Container(
            child: new Image.asset('images/${index + 1}.jpeg'),
          ));
    }

    //渲染GridView
    Widget buildGrid(){
      return new GridView.extent(
        maxCrossAxisExtent: 150.0,//次轴的宽度
        padding: const EdgeInsets.all(4.0),//上下左右内边距
        mainAxisSpacing: 4.0,//主轴间隙
        crossAxisSpacing: 4.0,//次轴间隙
        children: _buildGridTitleList(9),// 添加9个元素
      );
    }

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('GridView九宫格示例'),
      ),
      body: new Center(
        child: buildGrid(),
      ),
    );
  }
}

上述示例代码的视图展现大致如图7-35所示。

9.3 Table

几乎每一个前端技术的布局中都会有一种table布局,这种组件太常见了,以至于其表现形式,完全可以借鉴其他前端技术。表格布局中,每一行的高度由其内容决定,每一列的宽度由columnWidths属性单独控制。 Table组件属性见表7-2。 接下来编写一个用于员工基本信息统计的表格。Table表格布局完整的示例代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'Table表格布局示例',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Table表格布局示例'),
      ),
      body: new Center(
        child: Table(
          //设置表格有多少列,并且指定列宽
          columnWidths: const <int, TableColumnWidth>{
            0: FixedColumnWidth(100.0),
            1: FixedColumnWidth(40.0),
            2: FixedColumnWidth(80.0),
            3: FixedColumnWidth(80.0),
          },
          //设置表格边框样式
          border: TableBorder.all(color: Colors.black38, width: 2.0, style: BorderStyle.solid),
          children: const <TableRow>[
            //添加第一行数据
            TableRow(
              children: <Widget>[
                Text('姓名'),
                Text('性别'),
                Text('年龄'),
                Text('身高'),
              ],
            ),
            //添加第二行数据
            TableRow(
              children: <Widget>[
                Text('张三'),
                Text('男'),
                Text('26'),
                Text('172'),
              ],
            ),
            //添加第三行数据
            TableRow(
              children: <Widget>[
                Text('李四'),
                Text('男'),
                Text('28'),
                Text('178'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

上述示例代码的视图展现大致如图7-36所示。