Flutter开发：如何在PaginatedDataTable中实现页码程序化切换

核心原理 #

PaginatedDataTable 内置的 PaginatedDataTableState 类提供了公开的 pageTo() 方法，可以直接实现指定页码跳转，你无需手动维护页码变量控制组件刷新。

具体实现步骤 #

• 第一步：在当前页面的State类中定义全局Key，用于获取表格组件的状态实例

// 定义在State类内部
GlobalKey<PaginatedDataTableState> paginatedTableKey = GlobalKey();

• 第二步：给你的PaginatedDataTable组件绑定该Key
  在你现有PaginatedDataTable的构造参数中新增key属性：

PaginatedDataTable paginatedDataTable = PaginatedDataTable(
  key: paginatedTableKey, // 新增这一行
  // 其余原有参数保持不变
  actions: [/*原有代码*/],
  initialFirstRowIndex: firstRowIndex,
  // ...其余原有配置
);

• 第三步：在搜索触发的位置调用跳转方法
  不管是搜索提交、输入实时筛选还是清空搜索的场景，只要需要跳回第一页，调用以下代码即可：

// 跳转到第一页，入参为目标页的首行索引，第一页对应索引为0
paginatedTableKey.currentState?.pageTo(0);

以你代码中的AnimatedSearchBar为例，配置示例如下：

AnimatedSearchBar(
  width: 300,
  textController: _searchController,
  onSuffixTap: () {
    setState(() {
      _searchController.text = "";
      // 清空搜索时跳回第一页
      paginatedTableKey.currentState?.pageTo(0);
      // 这里执行你的清空筛选、重置数据源逻辑
    });
  },
  // 如果是提交才搜索，加onSubmitted回调
  onSubmitted: (searchKeyword) {
    // 执行你的筛选逻辑，更新数据源dts
    filterDataSource(searchKeyword);
    // 跳回第一页
    paginatedTableKey.currentState?.pageTo(0);
  },
  // 如果是边输入边实时搜索，加onChanged回调
  onChanged: (searchKeyword) {
    filterDataSource(searchKeyword);
    paginatedTableKey.currentState?.pageTo(0);
  },
)

备选方案（不推荐） #

如果你不想用Key调用内置方法，也可以在每次搜索时同时修改initialFirstRowIndex为0，并且给PaginatedDataTable新增一个随搜索触发而变化的Key（比如key: ValueKey(firstRowIndex)）强制组件重建，就能让新的initialFirstRowIndex生效，但这种方式会重绘整个表格，性能比第一种方案差。

内容的提问来源于stack exchange，提问作者Şerefcan Oğuz