Flutter中如何为GridView的API数据实现无限分页加载

你可以按照以下逻辑改造现有代码，实现滑到接近末尾自动加载下一页的效果：

1. 新增必要状态变量 #

首先在对应State类中声明以下状态，用来管控分页逻辑：

// 全量接口返回数据（如果你的接口本身支持分页传参，这个变量可以省略）
List allProfileData = [];
// 实际渲染的列表
List connectProfile = [];
// 单页固定加载条数
final int pageSize = 10;
// 当前已加载到的页码
int currentPage = 1;
// 加载状态锁，防止同一时间重复触发多次加载
bool isLoading = false;
// 标记是否还有剩余数据可加载
bool hasMore = true;
// 滚动控制器，用来监听滑动位置
final ScrollController scrollController = ScrollController();

2. 初始化监听与加载逻辑 #

在initState生命周期中完成初始数据加载、滚动监听绑定，同时编写统一的下一页加载方法：

@override
void initState() {
  super.initState();
  // 首次拿到接口返回的全量数据时，先存入全量变量，再加载第一页
  // 此处response为你首次请求接口拿到的返回结果
  allProfileData = response['data']['other_profile_verified'];
  loadNextPage();

  // 绑定滚动监听
  scrollController.addListener(() {
    // 提前200像素触发加载，不用等用户完全滑到最后一张卡片，体验更流畅
    if (scrollController.position.pixels >= scrollController.position.maxScrollExtent - 200) {
      // 仅当不在加载状态、且还有更多数据时才触发加载
      if (!isLoading && hasMore) {
        loadNextPage();
      }
    }
  });
}

// 加载下一页的通用方法
void loadNextPage() async {
  if (isLoading) return;
  isLoading = true;

  // 计算当前页需要取的数据起止索引
  int start = (currentPage - 1) * pageSize;
  int end = start + pageSize;
  // 防止结束索引超过全量数据总长度
  if (end > allProfileData.length) {
    end = allProfileData.length;
  }

  // 取出当前页数据追加到渲染列表
  List nextPageData = allProfileData.sublist(start, end);
  connectProfile.addAll(nextPageData);

  // 更新状态标记
  currentPage++;
  // 如果当前页取出的数据条数小于单页条数，说明已经加载完全部数据
  hasMore = nextPageData.length == pageSize;
  isLoading = false;

  // 刷新界面
  if (mounted) setState(() {});
}

// 页面销毁时释放控制器，避免内存泄漏
@override
void dispose() {
  scrollController.dispose();
  super.dispose();
}

如果你的接口本身支持分页参数（不是一次性返回所有数据），只需要把loadNextPage方法里切割全量数据的逻辑，替换成传入当前currentPage、pageSize参数请求对应页接口，拿到返回数据后追加到connectProfile即可，其余判断逻辑完全一致。

3. 改造原有GridView组件 #

给GridView传入自定义的滚动控制器，同时可以在列表末尾增加加载中提示，优化交互体验：

GridView.builder(
  controller: scrollController, // 传入绑定了监听的滚动控制器
  shrinkWrap: true,
  dragStartBehavior: DragStartBehavior.down,
  scrollDirection: Axis.horizontal,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    childAspectRatio: 3 / 2.2,
    crossAxisSpacing: 20,
    mainAxisSpacing: 5,
    crossAxisCount: 1,
  ),
  itemCount: connectProfile.length + (hasMore ? 1 : 0), // 加载中时多预留一个位置放loading组件
  itemBuilder: (BuildContext context, int index) {
    // 最后一个位置渲染加载中指示器
    if (index == connectProfile.length) {
      return const Center(
        child: Padding(
          padding: EdgeInsets.all(16),
          child: CircularProgressIndicator(strokeWidth: 2),
        ),
      );
    }
    return displayCardConatiner(
        MediaQuery.of(context).size.width,
        MediaQuery.of(context).size.height,
        connectProfile[index],
        index);
  }
)

注意事项 #

• 不要在build方法里直接给connectProfile赋值全量接口数据，否则每次UI刷新都会重置分页状态
• 加载锁isLoading必须添加，否则快速滑动时会重复触发加载逻辑，导致列表数据重复
• 如果你的横向GridView外层还有纵向可滚动组件，注意调整physics属性避免滑动冲突

内容的提问来源于stack exchange，提问作者Ritesh Patel