Flutter：如何实现两个PageView的联动滚动？

嘿，我完全懂你想要的那种同步滚动效果——两个viewportFraction不同的PageView，滚动第二个时第一个能顺滑跟上，就像iOS15 Safari的标签页那样。之前用jumpTo出现卡顿和半页自动跳转的问题太正常了，毕竟jumpTo是瞬时跳转没有过渡，而且PageView自带的滚动逻辑会强制把页面对齐到边界。下面给你几个靠谱的解决思路：

一、用PageController联动 + animateTo替代jumpTo #

jumpTo的卡顿感是硬伤，换成animateTo配合滚动监听能实现顺滑同步，还能解决半页跳页的问题：

• 绑定滚动监听：给PageView2配一个PageController，监听它的滚动位置变化，然后根据两个PageView的viewportFraction比例，计算PageView1需要滚动的偏移量，用animateTo来同步。比如PageView2的viewportFraction是0.8，PageView1是1.0，那PageView1的偏移量就是PageView2的偏移乘以1.0/0.8。
• 配合自定义物理规则：要让PageView2能停在半页位置，得自定义ScrollPhysics取消它的强制对齐逻辑（后面会说具体实现）。

给你一段示例代码参考：

final PageController _pageCtrl2 = PageController(viewportFraction: 0.8);
final PageController _pageCtrl1 = PageController(viewportFraction: 1.0);

@override
void initState() {
  super.initState();
  _pageCtrl2.addListener(() {
    // 根据视口比例计算同步偏移
    final syncOffset = _pageCtrl2.offset * (1.0 / 0.8);
    // 用animateTo实现顺滑滚动，时长和曲线可以按需调整
    _pageCtrl1.animateTo(
      syncOffset,
      duration: const Duration(milliseconds: 120),
      curve: Curves.easeOut,
    );
  });
}

@override
void dispose() {
  _pageCtrl1.dispose();
  _pageCtrl2.dispose();
  super.dispose();
}

// 构建两个PageView分别绑定对应的controller

要是担心快速滚动时频繁调用animateTo出问题，可以加个判断，比如只在滚动停止时同步，或者用_pageCtrl2.position.isScrollingNotifier来控制触发时机。

二、自定义ScrollPhysics解决半页自动跳转 #

PageView默认的PageScrollPhysics会强制把滚动位置对齐到页面边界，要让它能停在任意位置，我们可以自定义一个物理规则：

class FreeScrollPhysics extends PageScrollPhysics {
  const FreeScrollPhysics({super.parent});

  @override
  FreeScrollPhysics applyTo(ScrollPhysics? ancestor) {
    return FreeScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  double applyBoundaryConditions(ScrollMetrics position, double value) {
    // 返回0，不应用边界限制，允许停在任意位置
    return 0;
  }
}

然后把这个物理规则给PageView2用上：

PageView(
  physics: const FreeScrollPhysics(),
  controller: _pageCtrl2,
  viewportFraction: 0.8,
  // ...你的子项
)

三、用CustomScrollView替代PageView（更灵活的方案） #

如果PageView的限制太多，完全可以用CustomScrollView来实现类似的分页滚动效果，这样能完全掌控滚动行为：

• 把每个页面作为Sliver的子项，根据viewportFraction计算子项宽度（比如MediaQuery.of(context).size.width * 0.8）。
• 同样用滚动监听来同步两个CustomScrollView的位置，而且它不会强制对齐页面，天然解决半页跳转问题。

四、手势监听手动控制偏移（备选方案） #

如果上面的方案还是有适配问题，可以试试用Listener包裹PageView2，监听手势移动来手动同步：

Listener(
  onPointerMove: (event) {
    // 获取手势横向移动的距离
    final deltaX = event.delta.dx;
    // 按视口比例转换后同步到PageView1
    final syncDelta = deltaX * (1.0 / 0.8);
    _pageCtrl1.jumpTo(_pageCtrl1.offset - syncDelta);
  },
  child: PageView(
    controller: _pageCtrl2,
    viewportFraction: 0.8,
    // ...
  ),
)

不过这种方式要处理手势的开始、结束和惯性滚动，相对麻烦一些，适合特殊场景。

总结下来，最推荐的是PageController联动+animateTo+自定义ScrollPhysics的组合，既能解决卡顿问题，又能完美实现你要的同步滚动和半页停留效果。

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