Flutter中如何修改PaginatedDataTable每页显示行数

要调整PaginatedDataTable的每页行数，核心是通过状态管理维护当前行数，配合组件自带的参数实现，具体操作如下：

1. 将原StatelessWidget改为StatefulWidget，因为需要保存每页行数的状态
2. 在状态类中定义变量存储当前每页行数，同时实现行数切换的回调逻辑

以下是修改后的完整代码：

class PaginatedDataTableExample extends StatefulWidget {
  const PaginatedDataTableExample({super.key});

  @override
  State<PaginatedDataTableExample> createState() => _PaginatedDataTableExampleState();
}

class _PaginatedDataTableExampleState extends State<PaginatedDataTableExample> {
  // 自定义初始每页行数，可按需修改
  int _rowsPerPage = 5;
  // 可选的行数下拉选项，可根据需求调整
  final List<int> _availableRowsPerPage = [5, 10, 15, 20];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: PaginatedDataTable(
          columns: const [
            DataColumn(
              label: Text(
                'id',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            DataColumn(
              label: Text(
                'Begin',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            DataColumn(
              label: Text(
                'End',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
          ],
          source: DataTableSourceExample(),
          // 绑定当前每页行数
          rowsPerPage: _rowsPerPage,
          // 设置可选的行数选项
          availableRowsPerPage: _availableRowsPerPage,
          // 处理行数切换的回调
          onRowsPerPageChanged: (int? newRowsPerPage) {
            if (newRowsPerPage != null) {
              setState(() {
                _rowsPerPage = newRowsPerPage;
              });
            }
          },
        ),
      ),
    );
  }
}

关键说明： #

• rowsPerPage：指定当前每页显示的行数，这里绑定状态变量_rowsPerPage实现动态更新
• onRowsPerPageChanged：用户切换行数时触发的回调，通过setState更新状态，刷新表格显示
• availableRowsPerPage：自定义行数下拉选项列表，可根据业务需求增减选项值

内容的提问来源于stack exchange，提问作者Joe Black