flutter表格组件Table和TableRow

这个组件在展现数据的时候常用到，可以设置的属性并不难懂，主要的难点在符合业务的宽度设置规则上。

先展示一段示例的代码：

import 'package:flutter/material.dart';

class TableScreen extends StatefulWidget {
  TableScreen({Key key}) : super(key: key);

  @override
  _TableScreenState createState() => _TableScreenState();
}

class _TableScreenState extends State {
  List _renderList() {
    List titleList = ['aaaaaaaa', 'bbbb', 'ccccccccc', 'ddd', 'ee'];
    List list = [];
    for (var i = 0; i < titleList.length; i++) {
      list.add(
        TableRow(
          children: [
            Container(
              padding: EdgeInsets.all(12),
              child: Text(titleList[i]),
            ),
            Container(
              padding: EdgeInsets.all(12),
              child: Text(i % 2 == 0 ? 'content' : 'contentcontentcontentcontentcontentcontentcontentcontent'),
            )
          ]
        )
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Table'),
      ),
      body: Container(
        margin: EdgeInsets.only(top: 40),
        color: Colors.black12,
        child: Table(
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          columnWidths: {
            0: IntrinsicColumnWidth(),
            1: FlexColumnWidth()
          },
          children: _renderList()
        ),
      ),
    );
  }
}

效果图如下：

table.jpg

columnWidths这个属性就是对应宽度设置规则的，这个属性对应的值是一个Map类型，key是列的编号，从0开始，value是TableColumnWidth类型的，flutter提供的有6个分别是：IntrinsicColumnWidth、FixedColumnWidth、FractionColumnWidth、FlexColumnWidth、MaxColumnWidth和MinColumnWidth。

1. IntrinsicColumnWidth代表那一列中以最长一行的宽度为那一列的宽度
2. FixedColumnWidth 固定一个宽度，需要传一个值
3. FractionColumnWidth 指的是table的最大宽度的一个比例
4. FlexColumnWidth这个flex就很好理解了，和Flexible的用法没有区别
5. MaxColumnWidth会传进来两个值，取其中大值
6. MinColumnWidth会传进来两个值，取其中小值

defaultColumnWidth这个属性就是在columnWidths没有设置对应列时，即columnWidths[i]是null时，取defaultColumnWidth的值，当然defaultColumnWidth的值类型也是TableColumnWidth的。

textDirection这个属性是文字的排列顺序，不做赘述

border这个属性是定义边框的

TableCellVerticalAlignment这个是定义TableCell的垂直方向的布局的，默认是top，即顶部对齐。示例代码我设置成middle, 才有的水平方向内容居中。

textBaseline 这个是设置文本baseline对齐的时候需要的，值是枚举类型，只有alphabetic(字母类型)和ideographic(表意文字类型)。

这个系列的文章是根据flutter 的 Widget of the week来做的，欢迎大家斧正。