Flutter如何实现PaginatedDataTable数据分页功能

在Flutter中使用PaginatedDataTable时遇到分页功能实现问题。目前已经绑定了数据源并显示了初始数据，但不知道如何正确实现分页切换功能。具体表现为：点击分页控件时数据不会更新，且总页数显示不正确。请问应该如何正确设置onPageChanged回调？是否需要手动处理分页逻辑？求一个完整的分页实现示例代码。

2 回复

Flutter中实现PaginatedDataTable分页需以下步骤：

  1. 继承DataTableSource，重写rowCount、rowGetter和isRowCountApproximate方法。
  2. 在PaginatedDataTable中设置source属性为自定义DataTableSource实例。
  3. 通过onPageChanged回调处理页码变化，更新数据源并调用notifyListeners刷新表格。

示例代码：

class MyDataTableSource extends DataTableSource {
  @override
  int get rowCount => data.length;
  
  @override
  DataRow getRow(int index) => DataRow(cells: [
    DataCell(Text(data[index]))
  ]);
  
  @override
  bool get isRowCountApproximate => false;
}

更多关于Flutter如何实现PaginatedDataTable数据分页功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现PaginatedDataTable分页功能，主要涉及以下几个步骤：

1. 基本结构

PaginatedDataTable需要配合数据源和分页控制器使用：

class _MyTableState extends State<MyTable> {
  List<DataRow> _rows = [];
  int _rowsPerPage = 10;
  int _sortColumnIndex = 0;
  bool _sortAscending = true;
  
  @override
  Widget build(BuildContext context) {
    return PaginatedDataTable(
      header: Text('用户列表'),
      rowsPerPage: _rowsPerPage,
      onRowsPerPageChanged: (value) {
        setState(() {
          _rowsPerPage = value!;
        });
      },
      columns: [
        DataColumn(label: Text('ID')),
        DataColumn(label: Text('姓名')),
        DataColumn(label: Text('年龄')),
      ],
      source: _MyDataTableSource(_rows),
    );
  }
}

2. 数据源实现

继承DataTableSource并实现关键方法：

class _MyDataTableSource extends DataTableSource {
  final List<DataRow> rows;

  _MyDataTableSource(this.rows);

  @override
  DataRow? getRow(int index) {
    if (index >= rows.length) return null;
    return rows[index];
  }

  @override
  bool get isRowCountApproximate => false;

  @override
  int get rowCount => rows.length;

  @override
  int get selectedRowCount => 0;
}

3. 完整示例

class PaginatedTableExample extends StatefulWidget {
  @override
  _PaginatedTableExampleState createState() => _PaginatedTableExampleState();
}

class _PaginatedTableExampleState extends State<PaginatedTableExample> {
  final List<Map<String, dynamic>> _data = [];
  int _rowsPerPage = 10;
  final _MyDataTableSource _source = _MyDataTableSource([]);

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  void _loadData() {
    // 模拟加载数据
    _data.clear();
    for (int i = 0; i < 100; i++) {
      _data.add({
        'id': i + 1,
        'name': '用户${i + 1}',
        'age': 20 + (i % 30),
      });
    }
    _updateTable();
  }

  void _updateTable() {
    _source.updateRows(_data.map((item) => DataRow(cells: [
      DataCell(Text(item['id'].toString())),
      DataCell(Text(item['name'])),
      DataCell(Text(item['age'].toString())),
    ])).toList());
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: PaginatedDataTable(
        header: Text('分页表格示例'),
        rowsPerPage: _rowsPerPage,
        onRowsPerPageChanged: (value) {
          setState(() => _rowsPerPage = value!);
        },
        availableRowsPerPage: [5, 10, 20],
        columns: const [
          DataColumn(label: Text('ID')),
          DataColumn(label: Text('姓名')),
          DataColumn(label: Text('年龄')),
        ],
        source: _source,
      ),
    );
  }
}

class _MyDataTableSource extends DataTableSource {
  List<DataRow> _rows = [];

  void updateRows(List<DataRow> rows) {
    _rows = rows;
    notifyListeners();
  }

  @override
  DataRow? getRow(int index) => index < _rows.length ? _rows[index] : null;

  @override
  bool get isRowCountApproximate => false;

  @override
  int get rowCount => _rows.length;

  @override
  int get selectedRowCount => 0;
}

关键点说明：

  • rowsPerPage: 控制每页显示行数
  • onRowsPerPageChanged: 行数改变回调
  • notifyListeners(): 数据更新时通知表格刷新
  • availableRowsPerPage: 可选的每页行数配置

这样就能实现一个完整的分页数据表格，支持动态数据加载和分页控制。

回到顶部