Flutter中SliverChildBuilderDelegate内嵌PageView快速滚动默认显示最后一页如何解决

问题原因 #

这个问题是三个因素叠加导致的：

1. Sliver的子项回收复用机制：SliverChildBuilderDelegate会自动回收移出视口的子组件，你没有给每个PageView绑定唯一的状态标识，组件复用时会沿用之前被回收PageView的页码状态。
2. PageController创建方式错误：直接在PageView的controller参数内实例化PageController(initialPage: 0)的话，每次组件触发重建都会生成新的控制器，初始页配置无法持久生效。
3. 手势识别竞态：快速垂直滚动CustomScrollView时，轻微的水平手势偏移会被PageView捕获，触发意外翻页。

解决方法 #

方案1：保留PageView滑动状态，仅修复默认页错误

给每个PageView添加唯一的PageStorageKey，用来持久化保存每个PageView的页码，避免复用时状态错乱，同时修正Controller的创建逻辑：
你可以直接修改SliverChildBuilderDelegate的构建逻辑，代码如下：

delegate: SliverChildBuilderDelegate(
  (BuildContext context, int index) {
    return PageView(
      // 用Tab标识+列表索引生成唯一key，保证全局唯一
      key: PageStorageKey('${name}_pageview_$index'),
      controller: PageController(initialPage: 0),
      scrollDirection: Axis.horizontal,
      children: const <Widget>[
        Center(child: Text('First Page')),
        Center(child: Text('Second Page')),
        Center(child: Text('Third Page')),
      ],
    );
  },
  childCount: 100,
),

方案2：每次PageView出现时强制重置为第一页

如果不需要保留每个PageView的滑动进度，只要每次出现在视口时都默认展示第一页，可以把PageView抽成独立的Stateful组件，内部持有Controller并在挂载时强制跳转第一页：
首先定义独立的PageView组件：

class PageViewItem extends StatefulWidget {
  const PageViewItem({Key? key}) : super(key: key);

  @override
  State<PageViewItem> createState() => _PageViewItemState();
}

class _PageViewItemState extends State<PageViewItem> {
  late final PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: 0);
    // 组件挂载完成后强制跳转到第一页
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_pageController.hasClients) {
        _pageController.jumpToPage(0);
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: _pageController,
      scrollDirection: Axis.horizontal,
      // 如果存在手势冲突可以添加下面这行调整手势灵敏度
      // dragStartBehavior: DragStartBehavior.start,
      children: const <Widget>[
        Center(child: Text('First Page')),
        Center(child: Text('Second Page')),
        Center(child: Text('Third Page')),
      ],
    );
  }
}

然后在SliverChildBuilderDelegate中直接返回该组件即可：

delegate: SliverChildBuilderDelegate(
  (BuildContext context, int index) {
    return const PageViewItem();
  },
  childCount: 100,
),

如果测试后发现还是存在手势误触导致的翻页问题，可以给PageView添加physics: const ClampingScrollPhysics()降低滑动灵敏度，若不需要用户手动滑动PageView，直接设置physics: const NeverScrollableScrollPhysics()即可。

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