Flutter 分頁功能表格控件

老孟導讀：前2天有讀者問到是否有帶分頁功能的表格控件，今天分頁功能的表格控件詳細解析來來。

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博客地址（近200個控件用法）：http://laomengit.com

歡迎加入Flutter交流羣（微信：laomengit）、關注公衆號【老孟Flutter】：