Flutter中合并多页API响应到数组及分页实现咨询

1. 调整状态变量 #

在你的State类中添加全局变量，用于存储所有分页数据、控制页码和加载状态：

List<PostData> allPosts = []; // 对应API返回的data数组模型类
int currentPage = 1;
bool hasMore = true;

2. 修改API请求函数 #

重构getUserPost函数，不再直接返回UserPost，而是将新页数据合并到全局数组，同时处理刷新、加载更多的逻辑：

Future<void> getUserPost() async {
  // 避免重复请求：无更多数据且不是刷新状态时直接返回
  if (!hasMore && !isRefersh) return;

  var url = "https://myapi.com/getUserPost.php?page=$currentPage";
  try {
    var response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      var jsondata = jsonDecode(response.body.toString());
      var _apiData = UserPost.fromJson(jsondata);

      setState(() {
        if (isRefersh) {
          // 刷新操作：清空旧数据，替换为新页数据，重置页码
          allPosts = _apiData.data ?? [];
          currentPage = 1;
          hasMore = _apiData.hasNextPage == 1;
          isRefersh = false;
        } else {
          // 加载更多：将新页数据追加到全局数组，页码自增
          allPosts.addAll(_apiData.data ?? []);
          hasMore = _apiData.hasNextPage == 1;
          currentPage++;
        }
      });

      // 更新刷新控制器状态
      if (isRefersh) {
        refreshController.refreshCompleted();
      } else {
        hasMore ? refreshController.loadComplete() : refreshController.loadNoData();
      }
    } else {
      // 请求失败处理
      setState(() {
        if (isRefersh) isRefersh = false;
      });
      isRefersh ? refreshController.refreshFailed() : refreshController.loadFailed();
    }
  } catch (e) {
    // 网络异常处理
    setState(() {
      if (isRefersh) isRefersh = false;
    });
    isRefersh ? refreshController.refreshFailed() : refreshController.loadFailed();
  }
}

3. 构建分页ListView #

使用allPosts作为数据源，直接通过allPosts.length计算列表长度：

ListView.builder(
  controller: refreshController,
  itemCount: allPosts.length,
  itemBuilder: (context, index) {
    // 构建你的帖子列表项UI
    return ListTile(
      title: Text(allPosts[index].azakhanaName),
      subtitle: Text(allPosts[index].description),
      // 其他UI元素根据你的需求添加
    );
  },
  // 下拉刷新触发
  onRefresh: () {
    setState(() {
      isRefersh = true;
    });
    getUserPost();
  },
  // 上拉加载触发
  onLoading: () {
    getUserPost();
  },
)

4. 初始化加载 #

在initState中调用一次，加载第一页数据：

@override
void initState() {
  super.initState();
  getUserPost();
}

核心逻辑说明 #

• 数据合并：刷新时清空旧数据，加载更多时追加新数据，确保allPosts始终包含所有已加载的帖子。
• 页码控制：刷新后重置页码为1，加载更多时页码自增，避免重复请求同一页数据。
• 加载状态管理：通过hasMore变量判断是否还有下一页，结合refreshController更新UI的加载状态（完成/无更多/失败）。

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