美文网首页
Flutter Widget 010: Table

Flutter Widget 010: Table

作者: 狂奔的胖蜗牛 | 来源:发表于2021-03-25 23:03 被阅读0次

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

相关文章

网友评论

      本文标题:Flutter Widget 010: Table

      本文链接:https://www.haomeiwen.com/subject/qmhdhltx.html