日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：老李code ? 更新時間： 2022-08-17 編程語言

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

Table組件不同于其它Flex布局，它是直接繼承的RenderObjectWidget的。相當于是一個獨立的組件，區別與其他系列組件。

Table、TabRow、TabCell

慣例，先看下Table相關的構造方法：

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

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

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

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

如果不設置每列的占比，表格默認將會平分空間。

設置每列占比寬度值，

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

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

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

FixedColumnWidth:固定寬度。

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

如果我們是用了動態計算單元格，那么表格就會變成下方這樣，根據內容填充計算單元格大小自適應， 寬度就會根據文本大小動態計算單元格。

需要表格滑動記得別忘了加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全局設置垂直對齊方式，將TabCell嵌套在單元格組件上設置具體單元格垂直對齊方式。

小結

表格用法很簡單，主要是單元格大小、對齊方式需要注意下，當然這個表格的行列數量必須是一一對應的，不能像Excel那樣合并、分拆單元格。如果表格太復雜那就只能祭出大殺器自定義繪制了~~

原文鏈接：https://juejin.cn/post/7112386113154580488

欄目分類
最近更新