Flutter如何设置PaginatedDataTable

在Flutter中如何使用PaginatedDataTable实现分页表格？我尝试设置dataSource和columns后，表格能正常显示数据，但分页功能无法正常工作。请问该如何正确配置onPageChanged回调函数以及处理总行数？另外如何自定义分页控件的样式，比如修改每页显示行数的选项？

2 回复

使用PaginatedDataTable组件，需设置以下属性：

  • header：表格标题
  • columns：列定义
  • source：实现DataTableSource的数据源
  • rowsPerPage：每页行数
  • onPageChanged：翻页回调

示例：

PaginatedDataTable(
  header: Text('数据表'),
  columns: [...],
  source: _dataSource,
)

更多关于Flutter如何设置PaginatedDataTable的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，PaginatedDataTable是一个支持分页显示数据的数据表格组件，适用于大量数据的展示。以下是基本设置方法：

基本使用步骤

1. 创建数据模型

class MyData {
  final String name;
  final int age;
  final String email;

  MyData(this.name, this.age, this.email);
}

2. 实现DataTableSource

class MyDataTableSource extends DataTableSource {
  final List<MyData> _data = [
    MyData('张三', 25, 'zhangsan@email.com'),
    MyData('李四', 30, 'lisi@email.com'),
    // 更多数据...
  ];

  @override
  DataRow? getRow(int index) {
    if (index >= _data.length) return null;
    final item = _data[index];
    return DataRow.byIndex(
      index: index,
      cells: [
        DataCell(Text(item.name)),
        DataCell(Text(item.age.toString())),
        DataCell(Text(item.email)),
      ],
    );
  }

  @override
  bool get isRowCountApproximate => false;

  @override
  int get rowCount => _data.length;

  @override
  int get selectedRowCount => 0;
}

3. 在UI中使用

class MyPaginatedTable extends StatefulWidget {
  @override
  _MyPaginatedTableState createState() => _MyPaginatedTableState();
}

class _MyPaginatedTableState extends State<MyPaginatedTable> {
  final MyDataTableSource _dataSource = MyDataTableSource();
  int _rowsPerPage = 10; // 每页显示行数

  @override
  Widget build(BuildContext context) {
    return PaginatedDataTable(
      header: Text('用户列表'),
      rowsPerPage: _rowsPerPage,
      onRowsPerPageChanged: (value) {
        setState(() {
          _rowsPerPage = value!;
        });
      },
      availableRowsPerPage: [5, 10, 20, 50], // 可选的分页大小
      columns: [
        DataColumn(label: Text('姓名')),
        DataColumn(label: Text('年龄')),
        DataColumn(label: Text('邮箱')),
      ],
      source: _dataSource,
    );
  }
}

主要属性说明

  • header: 表格标题
  • rowsPerPage: 每页显示行数
  • onRowsPerPageChanged: 分页大小改变回调
  • availableRowsPerPage: 可选的每页行数列表
  • columns: 列定义
  • source: 数据源，必须继承DataTableSource

这样设置后，PaginatedDataTable会自动处理分页逻辑，用户可以通过底部的分页控件浏览不同页面的数据。

回到顶部