Flutter 分頁(yè)功能表格控件詳細(xì)解析
前2天有讀者問(wèn)到是否有帶分頁(yè)功能的表格控件，今天分頁(yè)功能的表格控件詳細(xì)解析。
PaginatedDataTable
PaginatedDataTable是一個(gè)帶分頁(yè)功能的DataTable，生成一批數(shù)據(jù)，項(xiàng)目中此一般通過(guò)服務(wù)器獲取，定義model類(lèi)：
class User {
User(this.name, this.age, this.sex);
final String name;
final int age;
final String sex;
}
生成數(shù)據(jù)：
List<User> _data = [];
@override
void initState() {
List.generate(100, (index) {
_data.add(User('老孟$index', index % 50, index % 2 == 0 ? '男' : '女'));
});
super.initState();
}
PaginatedDataTable的基礎(chǔ)用法如下：
PaginatedDataTable(
header: Text('header'),
columns: [
DataColumn(label: Text('姓名')),
DataColumn(label: Text('性別')),
DataColumn(label: Text('年齡')),
],
source: MyDataTableSource(_data),
)
header表示表格頂部控件。
columns表示每一列的列頭控件。
source表示數(shù)據(jù)源，需要繼承DataTableSource，用法如下：
class MyDataTableSource extends DataTableSource {
MyDataTableSource(this.data);
final List<User> data;
@override
DataRow getRow(int index) {
if (index >= data.length) {
return null;
}
return DataRow.byIndex(
index: index,
cells: [
DataCell(Text('${data[index].name}')),
DataCell(Text('${data[index].sex}')),
DataCell(Text('${data[index].age}')),
],
);
}
@override
int get selectedRowCount {
return 0;
}
@override
bool get isRowCountApproximate {
return false;
}
@override
int get rowCount {
return data.length;
}
}
效果如下：
getRow是根據(jù)index獲取每一行的數(shù)據(jù)，通常使用DataRow.byIndex返回?cái)?shù)據(jù)，cells表示每一個(gè)表格的數(shù)據(jù)，cells的數(shù)量需要與PaginatedDataTable中columns數(shù)量保持一致。
selectedRowCount是選中的行數(shù)，注意這里不是索引，是總共選中的行數(shù)。
isRowCountApproximate：如果isRowCountApproximate設(shè)置為true，行數(shù)將會(huì)無(wú)盡大，所以正常情況下isRowCountApproximate設(shè)置為false。
rowCount表示行數(shù)，如果isRowCountApproximate設(shè)置為true，此屬性無(wú)效。
設(shè)置actions，顯示在header的右端，用法如下：
PaginatedDataTable(
header: Text('header'),
actions: <Widget>[
IconButton(icon: Icon(Icons.add),onPressed: (){},),
IconButton(icon: Icon(Icons.delete),onPressed: (){},),
],
...
)
效果如下：
rowsPerPage表示每頁(yè)顯示的行數(shù)，默認(rèn)10行，設(shè)置5行如下：
PaginatedDataTable( rowsPerPage: 5, ... )
onRowsPerPageChanged不為null時(shí)，在左下角出現(xiàn)每頁(yè)顯示多少行數(shù)的選項(xiàng)，用法如下：
var _rowsPerPage = 5;
PaginatedDataTable(
onRowsPerPageChanged: (v) {
setState(() {
_rowsPerPage = v;
});
},
availableRowsPerPage: [5,10,15,16],
rowsPerPage: _rowsPerPage,
...
)
效果如下：
點(diǎn)擊出現(xiàn)availableRowsPerPage設(shè)置的數(shù)組，onRowsPerPageChanged為選擇其中一項(xiàng)后回調(diào)，用于更新rowsPerPage屬性。
顯示的數(shù)據(jù)過(guò)多時(shí)，需要將PaginatedDataTable包裹在SingleChildScrollView中，滾動(dòng)顯示數(shù)據(jù)：
SingleChildScrollView( child: PaginatedDataTable() )
onPageChanged是翻頁(yè)時(shí)回調(diào)，返回當(dāng)前頁(yè)第一條數(shù)據(jù)的索引：
PaginatedDataTable(
onPageChanged: (page){
print('onPageChanged:$page');
},
打印數(shù)據(jù)為：
flutter: onPageChanged:10
flutter: onPageChanged:20
flutter: onPageChanged:30
flutter: onPageChanged:40
排序
生序降序設(shè)置：
PaginatedDataTable( sortColumnIndex: 1, sortAscending: false, ... )
效果如下：
生序降序的設(shè)置僅僅顯示相應(yīng)圖標(biāo)，數(shù)據(jù)并不會(huì)實(shí)際排序，對(duì)數(shù)據(jù)進(jìn)行排序可以當(dāng)用戶(hù)點(diǎn)擊表頭時(shí)對(duì)數(shù)據(jù)按照本列數(shù)據(jù)進(jìn)行排序，用法如下，
var _sortAscending = true;
_buildPaginatedDataTable() {
return PaginatedDataTable(
header: Text('header'),
sortColumnIndex: 2,
sortAscending: _sortAscending,
columns: [
DataColumn(label: Text('姓名')),
DataColumn(label: Text('性別')),
DataColumn(
label: Text('年齡'),
onSort: (index, sortAscending) {
setState(() {
_sortAscending = sortAscending;
if (sortAscending) {
_data.sort((a, b) => a.age.compareTo(b.age));
} else {
_data.sort((a, b) => b.age.compareTo(a.age));
}
});
}),
],
source: MyDataTableSource(_data),
);
}
效果如下：
選中
可以在每一行的前面添加復(fù)選框，表示當(dāng)前行是否選中，在User中添加是否選中屬性，用法如下：
class User {
User(this.name, this.age, this.sex, {this.selected = false});
final String name;
final int age;
final String sex;
bool selected;
}
添加勾選框：
@override
DataRow getRow(int index) {
if (index >= data.length) {
return null;
}
return DataRow.byIndex(
index: index,
selected: data[index].selected,
onSelectChanged: (selected) {
data[index].selected = selected;
notifyListeners();
},
cells: [
DataCell(
Text('${data[index].name}'),
),
DataCell(Text('${data[index].sex}')),
DataCell(Text('${data[index].age}')),
],
);
}
效果如下：
全選控制：
PaginatedDataTable(
header: Text('header'),
onSelectAll: (all) {
setState(() {
_data.forEach((f){
f.selected = all;
});
});
},
處理數(shù)據(jù)顯示不全問(wèn)題
當(dāng)表格列比較多的時(shí)候，使用SingleChildScrollView包裹，顯示不全時(shí)滾動(dòng)顯示，用法如下：
SingleChildScrollView( scrollDirection: Axis.horizontal, child: PaginatedDataTable() )
效果如下：
交流
老孟Flutter博客地址（近200個(gè)控件用法）：http://laomengit.com
相關(guān)文章
Android 分析實(shí)現(xiàn)性能優(yōu)化之啟動(dòng)速度優(yōu)化
在移動(dòng)端程序中，用戶(hù)希望的是應(yīng)用能夠快速打開(kāi)。啟動(dòng)時(shí)間過(guò)長(zhǎng)的應(yīng)用不能滿(mǎn)足這個(gè)期望，并且可能會(huì)令用戶(hù)失望。輕則鄙視你，重則直接卸載你的應(yīng)用2021-11-11
android開(kāi)發(fā)教程之handle實(shí)現(xiàn)多線(xiàn)程和異步處理
這篇文章主要介紹了android的handle實(shí)現(xiàn)多線(xiàn)程和異步處理的示例，大家參考使用吧2014-01-01
這篇文章主要給大家介紹了關(guān)于Android狀態(tài)欄適配的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)各位Android開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Android中okhttp3.4.1+retrofit2.1.0實(shí)現(xiàn)離線(xiàn)緩存
這篇文章主要介紹了Android中okhttp3.4.1結(jié)合retrofit2.1.0實(shí)現(xiàn)離線(xiàn)緩存,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
TextInputLayout輸入框控件的懸浮標(biāo)簽
這篇文章主要為大家詳細(xì)介紹了TextInputLayout輸入框控件的懸浮標(biāo)簽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要為大家詳細(xì)介紹了Android Studio下載與安裝簡(jiǎn)易教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
Android 通過(guò)代碼設(shè)置、打開(kāi)wifi熱點(diǎn)及熱點(diǎn)連接的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android 通過(guò)代碼設(shè)置、打開(kāi)wifi熱點(diǎn)及熱點(diǎn)連接的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
Android實(shí)現(xiàn)簡(jiǎn)單的下拉刷新控件
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡(jiǎn)單的下拉刷新控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了Android字體設(shè)置及Roboto字體使用方法,較為詳細(xì)的分析了自定義字體及RoBoto的具體用法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
Android實(shí)現(xiàn)網(wǎng)絡(luò)加載圖片點(diǎn)擊大圖后瀏覽可縮放
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)網(wǎng)絡(luò)加載圖片點(diǎn)擊大圖后瀏覽可縮放，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12