溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了Flutter分頁功能表格控件的用法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
PaginatedDataTable
PaginatedDataTable是一個帶分頁功能的DataTable，生成一批數據，項目中此一般通過服務器獲取，定義model類：
class User {
User(this.name, this.age, this.sex);
final String name;
final int age;
final String sex;
}生成數據：
List<User> _data = [];
@override
void initState() {
List.generate(100, (index) {
_data.add(User('老孟$index', index % 50, index % 2 == 0 ? '男' : '女'));
});
super.initState();
}PaginatedDataTable的基礎用法如下：
PaginatedDataTable(
header: Text('header'),
columns: [
DataColumn(label: Text('姓名')),
DataColumn(label: Text('性別')),
DataColumn(label: Text('年齡')),
],
source: MyDataTableSource(_data),
)header表示表格頂部控件。
columns表示每一列的列頭控件。
source表示數據源，需要繼承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是根據index獲取每一行的數據，通常使用DataRow.byIndex返回數據，cells表示每一個表格的數據，cells的數量需要與PaginatedDataTable中columns數量保持一致。
selectedRowCount是選中的行數，注意這里不是索引，是總共選中的行數。
isRowCountApproximate：如果isRowCountApproximate設置為true，行數將會無盡大，所以正常情況下isRowCountApproximate設置為false。
rowCount表示行數，如果isRowCountApproximate設置為true，此屬性無效。
設置actions，顯示在header的右端，用法如下：
PaginatedDataTable(
header: Text('header'),
actions: <Widget>[
IconButton(icon: Icon(Icons.add),onPressed: (){},),
IconButton(icon: Icon(Icons.delete),onPressed: (){},),
],
...
)效果如下：
rowsPerPage表示每頁顯示的行數，默認10行，設置5行如下：
PaginatedDataTable( rowsPerPage: 5, ... )
onRowsPerPageChanged不為null時，在左下角出現每頁顯示多少行數的選項，用法如下：
var _rowsPerPage = 5;
PaginatedDataTable(
onRowsPerPageChanged: (v) {
setState(() {
_rowsPerPage = v;
});
},
availableRowsPerPage: [5,10,15,16],
rowsPerPage: _rowsPerPage,
...
)效果如下：
點擊出現availableRowsPerPage設置的數組，onRowsPerPageChanged為選擇其中一項后回調，用于更新rowsPerPage屬性。
顯示的數據過多時，需要將PaginatedDataTable包裹在SingleChildScrollView中，滾動顯示數據：
SingleChildScrollView( child: PaginatedDataTable() )
onPageChanged是翻頁時回調，返回當前頁第一條數據的索引：
PaginatedDataTable(
onPageChanged: (page){
print('onPageChanged:$page');
},打印數據為：
flutter: onPageChanged:10
flutter: onPageChanged:20
flutter: onPageChanged:30
flutter: onPageChanged:40
排序
生序降序設置：
PaginatedDataTable( sortColumnIndex: 1, sortAscending: false, ... )
效果如下：
生序降序的設置僅僅顯示相應圖標，數據并不會實際排序，對數據進行排序可以當用戶點擊表頭時對數據按照本列數據進行排序，用法如下，
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),
);
}效果如下：
選中
可以在每一行的前面添加復選框，表示當前行是否選中，在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;
});
});
},處理數據顯示不全問題
當表格列比較多的時候，使用SingleChildScrollView包裹，顯示不全時滾動顯示，用法如下：
SingleChildScrollView( scrollDirection: Axis.horizontal, child: PaginatedDataTable() )
效果如下：
看完上述內容，是不是對Flutter分頁功能表格控件的用法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
