如何使用RefreshIndicator加载API新数据 下拉刷新后页面未更新怎么办

问题根因 #

你当前的代码只有分页加载逻辑，下拉刷新时没有清空分页控制器的旧数据、重置页码，导致要么新数据追加在旧数据之后，要么还是请求旧页码的旧数据，页面自然不会更新为最新内容。

修复步骤 #

• 1. 先确保_pagingController初始化时设置的firstPageKey和你API要求的第一页页码一致，比如API第一页是1就设为1，是0就设为0：

// 初始化示例
final _pagingController = PagingController<int, Article>(
  firstPageKey: 1, // 这里要和你的API第一页参数匹配
);

• 2. 给RefreshIndicator的onRefresh回调配置重置逻辑，直接调用分页控制器的refresh()方法即可，它会自动清空旧数据、重置页码为初始的firstPageKey，重新调用你绑定的_fetchPage方法拉取最新的第一页数据：

RefreshIndicator(
  onRefresh: () async => _pagingController.refresh(),
  child: PagedListView(
    pagingController: _pagingController,
    builderDelegate: // 你的列表项构建逻辑
  )
)

• 3. （可选）如果你的API接口有本地缓存逻辑，需要在下拉刷新时强制走网络请求，修改_fetchPage方法增加强制刷新参数即可：

Future<void> _fetchPage(int pageKey, {bool forceRefresh = false}) async {
    try {
      final newItems = await ApiServices.fetchArticleList(
        pageKey, 
        _pageSize,
        // 给接口增加强制刷新参数，不走本地缓存
        forceRefresh: forceRefresh,
      );

      final isLastPage = newItems.length < _pageSize;
      if (isLastPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + newItems.length;
        _pagingController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      print(error);
      _pagingController.error = error;
    }
}

排查项 #

如果做完以上操作还是不更新，可以检查这两点：

• 确认你的PagedListView的pagingController参数和你使用的_pagingController是同一个实例，没有写错
• 如果列表项是自定义Stateful组件，检查是否在build方法中正确读取传入的最新数据，没有用组件内部State缓存旧数据

内容的提问来源于stack exchange，提问作者prabin maharjan