Flutter开发之——Table

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • Table用于创建表格试图组件
  • 一个完整的表格包含：Table(表格)，TableRow(一行)，TableCell(单元格)组成

二 表格的三要素(Table/TableRow/TableCell)

2.1 Table

构造函数

1
2
3
4
5
6
7
8
9
10
Table({
    Key? key,
    this.children = const <TableRow>[],
    this.columnWidths,
    this.defaultColumnWidth = const FlexColumnWidth(1.0),
    this.textDirection,
    this.border,
    this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
    this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
  })

常见属性说明

属性 说明 取值
children 表格构成子view <TableRow>[]
defaultColumnWidth 默认宽度 FixedColumnWidth
border 边框 TableBorder

border

属性 说明 取值
color 边框颜色 Color
width 边框宽度 double
style 边框样式 BorderStyle枚举

2.2 TableRow

构造函数

1
const TableRow({ this.key, this.decoration, this.children })

2.3 TableCell

构造函数

1
2
3
4
5
const TableCell({
    Key? key,
    this.verticalAlignment,
    required Widget child,
  })

三 示例

3.1 表格代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Table(
      defaultColumnWidth: FixedColumnWidth(100),
      border: TableBorder(
              top: BorderSide(color: Colors.red),
              left: BorderSide(color: Colors.red),
              right: BorderSide(color: Colors.red),
              bottom: BorderSide(color: Colors.red),
              horizontalInside: BorderSide(color: Colors.red),
              verticalInside: BorderSide(color: Colors.red),
            ),
       children: [
              TableRow(
                  decoration: ShapeDecoration(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)), color: Colors.blue),
                  children: [
                    TableCell(child: Text('姓名',textAlign:TextAlign.center ,)),
                    TableCell(child: Text('性别',textAlign:TextAlign.center)),
                    TableCell(child: Text('年龄',textAlign:TextAlign.center)),
                  ]),
              TableRow(children: [
                TableCell(child: Text('张三',textAlign:TextAlign.center)),
                TableCell(child: Text('男',textAlign:TextAlign.center)),
                TableCell(child: Text('20',textAlign:TextAlign.center)),
              ]),
              TableRow(children: [
                TableCell(child: Text('李四',textAlign:TextAlign.center)),
                TableCell(child: Text('女',textAlign:TextAlign.center)),
                TableCell(child: Text('18',textAlign:TextAlign.center)),
              ]),
            ],
          )

3.2 效果图