Flutter教学

Flutter(65):Layout组件之Table

2020-10-23  本文已影响0人  starryxp

Flutter教学目录持续更新中

Github源代码持续更新中

1.Table介绍

为其子widget使用表格布局算法的widget

2.Table属性

3.TableRow属性

4.TableColumnWidth

5.TableBorder

6.TableCellVerticalAlignment

7.栗子

  _myTableRowList() {
    return [
      TableRow(
        decoration: BoxDecoration(
          color: Colors.white,
        ),
        children: [
          Text(
            '姓名',
            textAlign: TextAlign.center,
          ),
          Text(
            '性别',
            textAlign: TextAlign.center,
          ),
          Text(
            '年龄',
            textAlign: TextAlign.center,
          ),
        ],
      ),
      TableRow(
        decoration: BoxDecoration(
          color: Colors.grey,
        ),
        children: [
          Text(
            '张三',
            textAlign: TextAlign.center,
          ),
          Text(
            '男',
            textAlign: TextAlign.center,
          ),
          Text(
            '18',
            textAlign: TextAlign.center,
          ),
        ],
      ),
      TableRow(
        decoration: BoxDecoration(
          color: Colors.red,
        ),
        children: [
          Text(
            '李四',
            textAlign: TextAlign.center,
          ),
          Text(
            '男',
            textAlign: TextAlign.center,
          ),
          Text(
            '20',
            textAlign: TextAlign.center,
          ),
        ],
      ),
      TableRow(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        children: [
          Text('王二'),
          Text('男男男男男男男'),
          Text('24'),
        ],
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Table'),
      ),
      body: Table(
        children: _myTableRowList(),
        columnWidths: {
          0: FlexColumnWidth(2),
          1: FlexColumnWidth(1),
          2: IntrinsicColumnWidth(flex: 1),
        },
        border: TableBorder(
          top: BorderSide(
            color: Colors.red,
            width: 2,
            style: BorderStyle.solid,
          ),
          left: BorderSide(
            color: Colors.blue,
            width: 2,
            style: BorderStyle.solid,
          ),
          right: BorderSide(
            color: Colors.amber,
            width: 2,
            style: BorderStyle.solid,
          ),
          bottom: BorderSide(
            color: Colors.green,
            width: 2,
            style: BorderStyle.solid,
          ),
          horizontalInside: BorderSide(
            color: Colors.black,
            width: 2,
            style: BorderStyle.solid,
          ),
          verticalInside: BorderSide(
            color: Colors.black,
            width: 2,
            style: BorderStyle.solid,
          ),
        ),
        defaultVerticalAlignment: TableCellVerticalAlignment.middle,
      ),
    );
  }
image.png

这个组件的属性相对来说没有DataTable来的多,但是他拥有TableColumnWidth这种更加灵活的宽度设置,两个组件如何选择就要看需求了,不了解DataTable的可以看一下:Flutter(30):Material组件之DataTable

下一节:Layout组件之Wrap

Flutter(66):Layout组件之Wrap

Flutter教学目录持续更新中

Github源代码持续更新中

上一篇 下一篇

猜你喜欢

热点阅读