1.概要

有时候，我们需要规则的行列来表示一些内容，比如如下所示：

image.png

当然，我们可以使用Row和Column来实现，也不是很复杂。但是对于这种需求，Flutter有一个更简单的Widget来实现。那就是Table。Table是一个不可以滚动的网格Widget，如果想滚动，请使用GridView。

2.源码

Table({
    Key key,
    // 内容数组，内容是TableRow
    this.children = const <TableRow>[],
    // 每一列宽度，是一个map，{
    //      0: FixedColumnWidth(100),
    //      1: FixedColumnWidth(40),
    //      2: FixedColumnWidth(50),
    //    }
    // 如果不设置列表宽度，则宽度会被默认扩展拉伸
    this.columnWidths,
    // 默认的列宽度
    this.defaultColumnWidth = const FlexColumnWidth(1.0),
    // 文字方向
    this.textDirection,
    // 边框
    this.border,
    // 默认水平布局方式
    this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
    // 文字基准线
    this.textBaseline = TextBaseline.alphabetic,
  })

TableRow源码：

const TableRow({ t
his.key, 
// 背景装饰
this.decoration, 
// 子Widget
this.children });

3.示例

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Table(
          columnWidths: {
            0: FixedColumnWidth(100),
            1: FixedColumnWidth(40),
            2: FixedColumnWidth(50),
          },
          children: [
            TableRow(
              children: [
                SizedBox(
                  height: 100,
                  child: Container(
                    color: Colors.red,
                  ),
                ),
                Container(
                  height: 50,
                  color: Colors.green,
                ),
                Container(
                  height: 200,
                  color: Colors.yellow,
                ),
              ]
            ),
            TableRow(
                children: [
                  Container(
                    height: 100,
                    color: Colors.red,
                  ),
                  Container(
                    height: 100,
                    color: Colors.blue,
                  ),
                  Container(
                    height: 200,
                    color: Colors.orange,
                  ),
                ]
            ),
          ],
        ),
      ),
    );
  }

image.png