如何通过PageView.builder实现双向无限滚动？

刚好我之前也碰到过这个问题！Flutter默认的PageView.builder确实只支持单方向（比如水平向右）的无限滚动，往左滚到初始页面就会被卡住，而且itemBuilder从来不会接收到负索引的请求——这是它的内部实现机制决定的，没有现成的API直接支持双向无限滚动。不过我们可以用一个小技巧来模拟出这个效果，核心思路是用超大的虚拟页面数量+索引映射+滚动监听循环，让用户体验上完全是双向无限的。

具体实现方案 #

我们可以自定义一个BidirectionalInfinitePageView组件，核心逻辑如下：

1. 设置一个足够大的虚拟页面总数（比如10000），把初始页放在中间位置，这样向左向右都有足够的滚动空间
2. 在itemBuilder里把虚拟页面的索引映射到实际数据源的索引（用取模运算处理循环）
3. 监听PageController的滚动，当滚动到接近虚拟页面的边界时，悄悄跳转到对应的中间区域，用户完全感知不到这个跳转

完整代码示例 #

import 'package:flutter/material.dart';

class BidirectionalInfinitePageView extends StatefulWidget {
  // 实际数据源的页面构建器
  final Widget Function(BuildContext, int) itemBuilder;
  // 实际数据源的数量
  final int itemCount;

  const BidirectionalInfinitePageView({
    super.key,
    required this.itemBuilder,
    required this.itemCount,
  });

  @override
  State<BidirectionalInfinitePageView> createState() => _BidirectionalInfinitePageViewState();
}

class _BidirectionalInfinitePageViewState extends State<BidirectionalInfinitePageView> {
  // 初始页设置在虚拟页面的中间位置
  final PageController _pageController = PageController(initialPage: 5000);

  @override
  void initState() {
    super.initState();
    // 监听滚动，实现页面循环
    _pageController.addListener(() {
      final currentPage = _pageController.page!;
      // 当滚动到距离左边界还有50页时，跳转到右侧对应的中间区域
      if (currentPage < 4950) {
        _pageController.jumpToPage(5000 + (currentPage - 4950).toInt());
      }
      // 当滚动到距离右边界还有50页时，跳转到左侧对应的中间区域
      else if (currentPage > 5050) {
        _pageController.jumpToPage(5000 - (currentPage - 5050).toInt());
      }
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: _pageController,
      // 超大的虚拟页面数量，模拟无限
      itemCount: 10000,
      itemBuilder: (context, index) {
        // 将虚拟索引映射到实际数据源的索引
        final actualIndex = (index - 5000) % widget.itemCount;
        // 处理负数取模的情况，确保索引为非负
        final normalizedIndex = actualIndex < 0 ? actualIndex + widget.itemCount : actualIndex;
        return widget.itemBuilder(context, normalizedIndex);
      },
    );
  }
}

使用方式 #

你可以像用普通PageView.builder一样使用这个组件：

BidirectionalInfinitePageView(
  itemCount: 3, // 你的实际数据源数量
  itemBuilder: (context, index) {
    return Center(
      child: Text('Page ${index + 1}'),
    );
  },
)

原理说明 #

这个方案本质是模拟无限滚动，因为Flutter的PageView本身不支持负索引和真正的无限页面，但通过设置超大的虚拟页面数量，再加上索引映射和滚动时的页面跳转，用户完全感觉不到边界的存在，视觉和交互上就是双向无限滚动的效果。

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