Flutter分頁功能表格控件的用法

發(fā)布時間：2020-07-29 13:55:38 來源：億速云閱讀：183 作者：小豬欄目：移動開發(fā)

這篇文章主要講解了Flutter分頁功能表格控件的用法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

PaginatedDataTable

PaginatedDataTable是一個帶分頁功能的DataTable，生成一批數(shù)據(jù)，項(xiàng)目中此一般通過服務(wù)器獲取，定義model類：

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 &#63; '男' : '女'));
 });
 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;
 }
}

效果如下：

Flutter分頁功能表格控件的用法

getRow是根據(jù)index獲取每一行的數(shù)據(jù)，通常使用DataRow.byIndex返回數(shù)據(jù)，cells表示每一個表格的數(shù)據(jù)，cells的數(shù)量需要與PaginatedDataTable中columns數(shù)量保持一致。

selectedRowCount是選中的行數(shù)，注意這里不是索引，是總共選中的行數(shù)。

isRowCountApproximate：如果isRowCountApproximate設(shè)置為true，行數(shù)將會無盡大，所以正常情況下isRowCountApproximate設(shè)置為false。

rowCount表示行數(shù)，如果isRowCountApproximate設(shè)置為true，此屬性無效。

設(shè)置actions，顯示在header的右端，用法如下：

PaginatedDataTable(
 header: Text('header'),
 actions: <Widget>[
 IconButton(icon: Icon(Icons.add),onPressed: (){},),
 IconButton(icon: Icon(Icons.delete),onPressed: (){},),
 ],
 ...
)

效果如下：

Flutter分頁功能表格控件的用法

rowsPerPage表示每頁顯示的行數(shù)，默認(rèn)10行，設(shè)置5行如下：

PaginatedDataTable(
 rowsPerPage: 5,
 ...
)

onRowsPerPageChanged不為null時，在左下角出現(xiàn)每頁顯示多少行數(shù)的選項(xiàng)，用法如下：

var _rowsPerPage = 5;
PaginatedDataTable(
 onRowsPerPageChanged: (v) {
 setState(() {
  _rowsPerPage = v;
 });
 },
 availableRowsPerPage: [5,10,15,16],
 rowsPerPage: _rowsPerPage,
 ...
)

效果如下：

Flutter分頁功能表格控件的用法

點(diǎn)擊出現(xiàn)availableRowsPerPage設(shè)置的數(shù)組，onRowsPerPageChanged為選擇其中一項(xiàng)后回調(diào)，用于更新rowsPerPage屬性。

顯示的數(shù)據(jù)過多時，需要將PaginatedDataTable包裹在SingleChildScrollView中，滾動顯示數(shù)據(jù)：

SingleChildScrollView(
 child: PaginatedDataTable()
)

onPageChanged是翻頁時回調(diào)，返回當(dāng)前頁第一條數(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,
 ...
)

效果如下：

Flutter分頁功能表格控件的用法

生序降序的設(shè)置僅僅顯示相應(yīng)圖標(biāo)，數(shù)據(jù)并不會實(shí)際排序，對數(shù)據(jù)進(jìn)行排序可以當(dāng)用戶點(diǎn)擊表頭時對數(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),
 );
}

效果如下：

Flutter分頁功能表格控件的用法

選中

可以在每一行的前面添加復(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}')),
 ],
 );
}

效果如下：

Flutter分頁功能表格控件的用法

全選控制：

PaginatedDataTable(
 header: Text('header'),
 onSelectAll: (all) {
 setState(() {
  _data.forEach((f){
  f.selected = all;
  });
 });
 },

處理數(shù)據(jù)顯示不全問題

當(dāng)表格列比較多的時候，使用SingleChildScrollView包裹，顯示不全時滾動顯示，用法如下：

SingleChildScrollView(
 scrollDirection: Axis.horizontal,
 child: PaginatedDataTable()
)

效果如下：

Flutter分頁功能表格控件的用法

看完上述內(nèi)容，是不是對Flutter分頁功能表格控件的用法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

Flutter分頁功能表格控件的用法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽