Android Flutter表格組件Table的使用詳解
之前開發(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,// 單元格垂直對齊方式
this.textBaseline, //對齊文本的水平線
})
// 表格內(nèi)容區(qū)
const TableRow({
this.key,
this.decoration,// 行單元裝飾
this.children // 每一行內(nèi)容列表 表示一行多少內(nèi)容
});
// 單元格垂直對齊方式
const TableCell({
Key? key,
this.verticalAlignment,// 具體單元格垂直對齊方式、上面修改全局,這里可以覆蓋全局單獨(dú)設(shè)置
required Widget child,
}
構(gòu)造參數(shù)很少,用起來也比較簡單,比如我們要展示三行三列數(shù)據(jù),這里以最為常見的成績表為例,設(shè)置了單元格樣式,表格的邊框色,單元格文本。
如果不設(shè)置每列的占比,表格默認(rèn)將會平分空間。

設(shè)置每列占比寬度值,
columnWidths: {
0:FixedColumnWidth(100),
1:FixedColumnWidth(200),
2:FixedColumnWidth(200),
},
這是一個(gè)map對象,我們可以固定設(shè)置每列的寬度值,如果不設(shè)置它將自動填充剩余空間。

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

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

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


需要表格滑動記得別忘了加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è)置具體單元格垂直對齊方式。
小結(jié)
表格用法很簡單,主要是單元格大小、對齊方式需要注意下,當(dāng)然這個(gè)表格的行列數(shù)量必須是一一對應(yīng)的,不能像Excel那樣合并、分拆單元格。如果表格太復(fù)雜那就只能祭出大殺器自定義繪制了~~
到此這篇關(guān)于Android Flutter表格組件Table的使用詳解的文章就介紹到這了,更多相關(guān)Flutter表格組件Table內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android開發(fā)實(shí)現(xiàn)ImageView寬度頂邊顯示,高度保持比例的方法
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)ImageView寬度頂邊顯示,高度保持比例的方法,結(jié)合實(shí)例形式分析了Android ImageView界面布局及元素屬性動態(tài)操作兩種功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-02-02
Android 讀取sdcard上的圖片實(shí)例(必看)
下面小編就為大家?guī)硪黄狝ndroid 讀取sdcard上的圖片實(shí)例(必看)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Android編程實(shí)現(xiàn)webview將網(wǎng)頁打包成apk的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)webview將網(wǎng)頁打包成apk的方法,以打包HTML5為例分析了webview打包apk的相關(guān)方法、屬性與事件操作技巧,需要的朋友可以參考下2017-08-08
輕松實(shí)現(xiàn)可擴(kuò)展自定義的Android滾輪時(shí)間選擇控件
這篇文章主要為大家詳細(xì)介紹了可擴(kuò)展自定義的Android滾輪時(shí)間選擇控件,結(jié)合WheelView實(shí)現(xiàn)滾輪選擇日期操作,感興趣的小伙伴們可以參考一下2016-07-07
Android Bitmap詳解及Bitmap的內(nèi)存優(yōu)化
這篇文章主要介紹了Android Bitmap詳解及Bitmap的內(nèi)存優(yōu)化的相關(guān)資料,Bitmap是Android系統(tǒng)中的圖像處理的最重要類之一。用它可以獲取圖像文件信息,進(jìn)行圖像剪切、旋轉(zhuǎn)、縮放等操作,并可以指定格式保存圖像文件,需要的朋友可以參考下2017-03-03
Android如何實(shí)現(xiàn)一個(gè)DocumentProvider示例詳解
這篇文章主要為大家介紹了Android如何實(shí)現(xiàn)一個(gè)DocumentProvider示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
Android實(shí)用小技巧之利用Lifecycle寫出更好維護(hù)的代碼
lifecycle是一個(gè)類,用于存儲有關(guān)組件(如Activity或Fragment)的生命周期狀態(tài)的信息,并允許其他對象觀察此狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Android實(shí)用小技巧之利用Lifecycle寫出更好維護(hù)的代碼的相關(guān)資料,需要的朋友可以參考下2022-05-05
務(wù)必掌握的Android十六進(jìn)制狀態(tài)管理最佳實(shí)踐
這篇文章主要為大家介紹了務(wù)必掌握的Android十六進(jìn)制狀態(tài)管理最佳實(shí)踐,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09

