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个控件用法）：laomengit.com

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：