如何在Flutter中用PageView.builder实现双向无限滚动？

要实现支持正负索引的双向无限滑动，核心是让PageView的虚拟索引和你的数据列表做循环映射，具体步骤如下：

1. 初始化带初始偏移的PageController #

给PageController设置一个足够大的初始页码（比如10000），这样往左滑动时虚拟索引可以从这个值递减，不会很快触底：

final PageController pageController = PageController(initialPage: 10000);

2. 修改PageView.builder的itemBuilder逻辑 #

在itemBuilder里，把PageView传入的虚拟索引转换成实际数据列表的索引，通过取模运算实现循环，同时处理负数取模的问题：

PageView.builder(
  controller: pageController,
  itemBuilder: (BuildContext context, int index) {
    // 计算实际数据索引：把虚拟索引相对于初始页码的偏移量取模
    int realIndex = (index - 10000) % dataList.length;
    // 处理负数取模的情况，确保索引为正
    realIndex = realIndex < 0 ? realIndex + dataList.length : realIndex;
    return MyPage(data: dataList[realIndex]);
  },
  // 不需要设置pageCount，保持无限滑动能力
);

原理说明 #

• 用大初始值（10000）是为了给向左滑动预留足够的“虚拟空间”，用户几乎不可能滑到这个初始值的边界
• 取模运算% dataList.length让虚拟索引的偏移量循环对应到数据列表的索引，实现无限循环展示
• 处理负数取模是因为Dart中负数取模会得到负数结果，比如(-1) % 3 = -1，需要转换成2才能正确取到列表最后一项

这样修改后，用户既可以向右无限滑动，也可以向左滑到“负索引”对应的内容，本质上是循环展示你的数据列表。

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