【Flutter】【widget】Table 表格widget

---

前言

Table 表格widget，其实很少使用到的，等有需要的时候在查看该widget

---

一、Table 是什么？

表格widget，但是不能像excel 那么强大。

二、使用步骤

1.Table 基础使用

代码如下（示例）：

    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Table(
        children: [
          TableRow(children: [
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            )
          ]),
          TableRow(children: [
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            )
          ])
        ],
      ),
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
31
32
33
34
35
36
37
38

2.宽度

宽度的设置的几种形式

• FlexColumnWidth

 //columnWidths 单元格的宽，map 哪列 ：宽度
  columnWidths: {
    0: FlexColumnWidth(20),
    1: FlexColumnWidth(10),
    2: FlexColumnWidth(10),
    3: FlexColumnWidth(10)
  },
1
2
3
4
5
6
7

如图：

• IntrinsicColumnWidth:以那个最宽的单元格为该列的宽度

   columnWidths: {
     0: IntrinsicColumnWidth(),
     1: FlexColumnWidth(10),
     2: FlexColumnWidth(20),
     3: FlexColumnWidth(10)
   },
1
2
3
4
5
6

如图：

• MaxColumnWidth:以那个最宽的单元格为该列的宽度，设置最大值，如果超过这个最大也是取最大值

        columnWidths: const {
          0: MaxColumnWidth(FlexColumnWidth(20), FlexColumnWidth(200)),
          1: FlexColumnWidth(10),
          2: FlexColumnWidth(10),
          3: FlexColumnWidth(10)
        },
1
2
3
4
5
6

3.设置边框

代码如下（示例）：

    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Table(
        border: TableBorder(
          //添加上行左右的网格线
            top: BorderSide(color: Colors.red),
            left: BorderSide(color: Colors.red),
            bottom: BorderSide(color: Colors.red),
            right: BorderSide(color: Colors.red),
            //水平线
            horizontalInside: BorderSide(color: Colors.red),
            //垂直方向
            verticalInside: BorderSide(color: Colors.red)),
        //columnWidths 单元格的宽，map 哪列 ：宽度
        columnWidths: {
          0: FlexColumnWidth(20),
          1: FlexColumnWidth(10),
          2: FlexColumnWidth(10),
          3: FlexColumnWidth(10)
        },
        children: [
          TableRow(children: [
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            )
          ]),
          TableRow(children: [
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            ),
            TableCell(
              child: Text(' i am one '),
            )
          ])
        ],
      ),
// This trailing comma makes auto-formatting nicer for build methods.
    );
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

4.TableCell设置单元格式widget等其他设置

• 可以单元的内容设置为widget

  TableCell(
       child: Card(child: Text(' i am onedfasdfadsfasd ')),
     ),
1
2
3

• 设置垂直方向的对齐方式：

    TableCell(
         verticalAlignment: TableCellVerticalAlignment.middle,
        child: Text(' i am onedfasdfadsfasd '),
      ),
1
2
3
4

• 设置背景颜色

 TableRow(
              decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.all(Radius.circular(15))),
              children: [
                TableCell(
                  verticalAlignment: TableCellVerticalAlignment.bottom,
                  child: Text(' i am onedfasdfadsfasd '),
                ),
1
2
3
4
5
6
7
8
9

---

总结

欢迎关注，留言，咨询，交流！