快捷導(dǎo)航

Android Flutter表格組件Table的使用詳解

更新時間：2022年06月24日 09:34:53 作者：老李code

Table組件不同于其它Flex布局，它是直接繼承的RenderObjectWidget的。本篇文章主要介紹如何在頁面中使用表格做一個記錄，感興趣的可以嘗試一下

Table、TabRow、TabCell

慣例，先看下Table相關(guān)的構(gòu)造方法：

Table({
  Key? key,
  this.children = const <TableRow>[],//行列表 表示多少行
  this.columnWidths,// 表格每列分布寬度
  // 默認(rèn)平分占比 修改每一列占比使用上面的參數(shù)
  this.defaultColumnWidth = const FlexColumnWidth(),
  this.textDirection,//閱讀順序
  this.border,// 邊框樣式
  this.defaultVerticalAlignment = TableCellVerticalAlignment.top,// 單元格垂直對齊方式
  this.textBaseline, //對齊文本的水平線
})

// 表格內(nèi)容區(qū)
const TableRow({
this.key, 
this.decoration,// 行單元裝飾
this.children // 每一行內(nèi)容列表 表示一行多少內(nèi)容
});

// 單元格垂直對齊方式
const TableCell({
  Key? key,
  this.verticalAlignment,// 具體單元格垂直對齊方式、上面修改全局，這里可以覆蓋全局單獨設(shè)置
  required Widget child,
}

構(gòu)造參數(shù)很少，用起來也比較簡單，比如我們要展示三行三列數(shù)據(jù)，這里以最為常見的成績表為例，設(shè)置了單元格樣式，表格的邊框色，單元格文本。

如果不設(shè)置每列的占比，表格默認(rèn)將會平分空間。

設(shè)置每列占比寬度值，

columnWidths: {
  0:FixedColumnWidth(100),
  1:FixedColumnWidth(200),
  2:FixedColumnWidth(200),
},

這是一個map對象，我們可以固定設(shè)置每列的寬度值，如果不設(shè)置它將自動填充剩余空間。

這是我們表格數(shù)據(jù)比較少的時候，當(dāng)列數(shù)比較多的時候，我們希望可以橫向滑動來查看，畢竟在移動端屏幕有限，這里我們就必須要用defaultColumnWidth這個參數(shù)來設(shè)置單元格寬度，從源碼中我們可以得知，如果寬度無限大的話，需要使用FixedColumnWidth或IntrinsicColumnWidth設(shè)置單元格大小。

FixedColumnWidth:固定寬度。

IntrinsicColumnWidth:動態(tài)設(shè)置單元格大小，當(dāng)我們的單元格大小不能確定時使用，但是使用這個計算方式對于內(nèi)存消耗是非常大的，在源碼注釋中看到，具體為啥消耗大，暫時留個坑。

如果我們是用了動態(tài)計算單元格，那么表格就會變成下方這樣，根據(jù)內(nèi)容填充計算單元格大小自適應(yīng)，寬度就會根據(jù)文本大小動態(tài)計算單元格。

需要表格滑動記得別忘了加SingleChildScrollView組件，如果需要橫縱雙向滑動，可以這么嵌套加:

SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child:  Table(
          textBaseline: TextBaseline.alphabetic,
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          defaultColumnWidth: IntrinsicColumnWidth(),
          children: _getTabRows(),
          border: TableBorder.all(color: Colors.red, width: 1),
        ),)),

TabRow、TabCell使用方式非常簡單就不過多介紹了，

需要注意的是TabCell組件一定是Tabel下的子組件才能使用，一般配合defaultVerticalAlignment全局設(shè)置垂直對齊方式，將TabCell嵌套在單元格組件上設(shè)置具體單元格垂直對齊方式。