Flutter使用infinite_scroll_pagination分页时离线搜索筛选不生效求助

根本原因 #

infinite_scroll_pagination 依赖自身维护的 PagingController 内的数据源渲染列表，你仅修改自定义的过滤列表变量不会触发 PagingController 的状态更新，因此列表不会重绘展示筛选后的数据。

具体解决步骤 #

• 第一步：新增搜索状态标记，搜索时直接更新 PagingController 的数据源
  修改你的搜索逻辑代码如下：

// 新增搜索状态标记
bool _isSearching = false;

_onProductSearchChanged() {
  _isSearching = cartSearchQueryController.text.isNotEmpty;

  if (_isSearching) {
    // 过滤全量已缓存的商品数据
    final filteredList = cartSalesMarketingDetail
        .where((u) => u.marketingName.toLowerCase()
        .contains(cartSearchQueryController.text.toLowerCase()))
        .toList();
    // 直接更新PagingController的数据源
    _pagingController.itemList = filteredList;
    // 搜索状态下标记已到最后一页，避免触发多余的分页加载
    _pagingController.appendLastPage([]);
  } else {
    // 退出搜索时恢复原有分页数据
    _pagingController.itemList = cartSalesMarketingDetail;
    // 若还有未加载的分页数据，可在此处恢复原有分页状态
  }
  setState(() {});
}

• 第二步：修改分页请求逻辑，搜索状态下跳过网络请求
  在 PagingController 的分页请求回调中新增状态判断：

_pagingController.addPageRequestListener((pageKey) {
  // 搜索状态下不执行分页请求
  if (_isSearching) return;

  // 原有分页请求逻辑，注意请求成功后要把新数据追加到全量缓存变量cartSalesMarketingDetail中
  // 示例：
  // fetchProductPage(pageKey).then((newItems) {
  //   cartSalesMarketingDetail.addAll(newItems);
  //   final isLastPage = newItems.length < 50;
  //   if (isLastPage) {
  //     _pagingController.appendLastPage(newItems);
  //   } else {
  //     _pagingController.appendPage(newItems, pageKey + 1);
  //   }
  // });
});

• 第三步：正确绑定输入框监听
  在 initState 中绑定输入框的变化监听，销毁时移除：

@override
void initState() {
  super.initState();
  cartSearchQueryController.addListener(_onProductSearchChanged);
}

@override
void dispose() {
  cartSearchQueryController.removeListener(_onProductSearchChanged);
  cartSearchQueryController.dispose();
  _pagingController.dispose();
  super.dispose();
}

注意事项 #

• 要确保 cartSalesMarketingDetail 变量缓存了所有已经加载过的分页数据，不要仅保存当前页数据，才能实现全量已加载数据的离线筛选
• 若需要搜索服务端全量未加载的数据，需要额外实现带搜索参数的分页请求逻辑，不适用本地离线筛选方案

内容的提问来源于stack exchange，提问作者Kalp Shah