之前開發(fā)中用到的表格，本篇文章主要介紹如何在頁面中使用表格做一個(gè)記錄。

Table組件不同于其它Flex布局，它是直接繼承的RenderObjectWidget的。相當(dāng)于是一個(gè)獨(dú)立的組件，區(qū)別與其他系列組件。

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,// 單元格垂直對(duì)齊方式
  this.textBaseline, //對(duì)齊文本的水平線
})

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

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

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

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

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

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

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

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

FixedColumnWidth:固定寬度。

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

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

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

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使用方式非常簡(jiǎn)單就不過多介紹了，

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

小結(jié)

表格用法很簡(jiǎn)單，主要是單元格大小、對(duì)齊方式需要注意下，當(dāng)然這個(gè)表格的行列數(shù)量必須是一一對(duì)應(yīng)的，不能像Excel那樣合并、分拆單元格。如果表格太復(fù)雜那就只能祭出大殺器自定義繪制了~~

到此這篇關(guān)于Android Flutter表格組件Table的使用詳解的文章就介紹到這了,更多相關(guān)Flutter表格組件Table內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論