Flutter中如何让PageView无限滚动时复用同一带状态Widget且不重建

问题根因 #

Flutter 框架规则限制：同一个 Widget 实例无法同时挂载到 Element 树的多个节点，你当前直接在itemBuilder中返回同一个 Widget 实例的写法无法实现预期效果，每次新索引触发 builder 时，框架会为新页面位置创建新的 Element 实例，就算关联的 Widget 是同一个对象，也会触发初始化、状态创建逻辑，导致反复重建。 #

可行解决方案 #

方案1：单页面+模拟无限滚动（100%复用实例，无重建） #

该方案完全符合复用同一个 Widget 实例的需求，原理是 PageView 仅配置1个展示项，通过监听滚动偏移，无感知重置 PageController 位置，模拟无限滚动效果，全程只有一个 Page1 实例，不会触发任何重建逻辑，状态完全保留。
代码示例：

final PageController _pageController = PageController();
bool _isResettingOffset = false;

@override
void initState() {
  super.initState();
  _pageController.addListener(_handleScrollOffset);
}

void _handleScrollOffset() {
  if (_isResettingOffset) return;
  final currentPage = _pageController.page;
  // 滚动偏移超过半页时无感知重置到初始位置
  if (currentPage > 0.5 || currentPage < -0.5) {
    _isResettingOffset = true;
    _pageController.jumpTo(0);
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _isResettingOffset = false;
    });
  }
}

@override
Widget build(BuildContext context) {
  return PageView.builder(
    controller: _pageController,
    itemCount: 1,
    itemBuilder: (context, index) => Page1(),
  );
}

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

方案2：状态上移托管（体验等价于实例复用） #

如果需要保留 PageView 原生的滚动阻尼、惯性等特性，不想做偏移拦截，可以将 Page1 内部所有需要保留的状态抽离到上层父组件，或通过状态管理工具托管，此时就算 PageView 每次新建 Page1 实例，所有状态都从外部统一获取，体验和复用实例完全一致，不会出现状态丢失的问题。
代码示例：

// 父组件托管Page1的所有状态
class _ParentPageState extends State<ParentPage> {
  // 示例：原Page1内部的计数器状态
  int _page1Counter = 0;

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: PageController(),
      itemBuilder: (context, index) {
        return Page1(
          counter: _page1Counter,
          onCounterUpdate: (newVal) => setState(() => _page1Counter = newVal),
        );
      },
    );
  }
}

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