Flutter使用pull_to_refresh包实现分页遇到问题求助

问题1：下一页数据替换原有列表 #

根源 #

你当前每次请求分页数据后，直接返回新的UserPost对象，FutureBuilder会用新数据覆盖旧列表，没有做数据合并。

修复步骤 #

1. 新增一个全局列表变量，用来存储所有加载完成的帖子数据：

   List<Post> _posts = []; // 替换成你的实际帖子模型类型，比如UserPost里的posts字段类型
   

2. 修改getUserPost方法，根据刷新/加载状态更新列表：
   • 下拉刷新时：清空原有列表，添加第一页数据
   • 加载下一页时：把新获取的分页数据追加到列表末尾

问题2：下拉刷新后无法触发下一页请求 #

根源 #

之前加载完最后一页时调用了refreshController.loadNoData()，控制器会被标记为「无更多数据」状态，即使刷新重置了页码，控制器状态没重置，所以不会再触发加载。另外原代码中onLoading里的hasNextPage判断用的是旧快照数据，逻辑不严谨。

修复步骤 #

1. 下拉刷新时，除了重置页码和刷新标记，必须调用refreshController.resetNoData()重置控制器状态
2. 将控制器状态的判断逻辑移到getUserPost方法里，根据API返回的最新hasNextPage值来决定调用loadComplete()还是loadNoData()

修改后的完整代码片段 #

全局变量调整

int currentPage = 1;
bool isRefresh = false;
final RefreshController refreshController = RefreshController();
// 存储所有帖子的全局列表
List<Post> _posts = []; // 替换为你的帖子模型类

获取数据方法改造

Future<void> getUserPost() async {
  var url = "LINK=$currentPage";
  var response = await http.get(Uri.parse(url));
  var jsondata = jsonDecode(response.body.toString());
  var _apiData = UserPost.fromJson(jsondata);

  if (response.statusCode == 200) {
    setState(() {
      if (isRefresh) {
        // 刷新：清空旧数据，替换为第一页内容
        _posts = _apiData.posts; // 替换为UserPost中存储帖子列表的字段名
        isRefresh = false;
        refreshController.refreshCompleted();
      } else {
        // 加载下一页：追加新数据
        _posts.addAll(_apiData.posts);
        // 根据API返回的hasNextPage设置控制器状态
        if (_apiData.hasNextPage == 0) {
          refreshController.loadNoData();
        } else {
          refreshController.loadComplete();
        }
      }
    });
  } else {
    // 请求失败时更新控制器状态
    if (isRefresh) {
      refreshController.refreshFailed();
    } else {
      refreshController.loadFailed();
    }
  }
}

下拉刷新方法调整

onRefresh: () async {
  await Future.delayed(const Duration(milliseconds: 1000));
  setState(() {
    isRefresh = true;
    currentPage = 1;
    // 重置控制器无数据状态，确保刷新后能再次加载下一页
    refreshController.resetNoData();
  });
  await getUserPost();
},

分页加载方法调整

onLoading: () async {
  await Future.delayed(const Duration(milliseconds: 1000));
  setState(() {
    currentPage++;
  });
  await getUserPost();
},

列表构建调整

把原来依赖FutureBuilder的写法改成直接基于_posts列表构建：

PullToRefresh(
  controller: refreshController,
  onRefresh: onRefresh,
  onLoading: onLoading,
  child: ListView.builder(
    itemCount: _posts.length,
    itemBuilder: (context, index) {
      // 渲染你的帖子项
      return YourPostWidget(post: _posts[index]);
    },
  ),
)

内容的提问来源于stack exchange，提问作者Taki Rajani