如何解决Flutter嵌套PageView中WebView滚动不流畅的问题？

我使用了嵌套PageView：外层为水平滚动的PageView，子项包含一个垂直滚动的StatefulPageview和一个ArticleWebView。垂直滚动的内层PageView运行正常，但切换到WebView页面后，尝试垂直滚动时，哪怕是极轻微的水平滑动都会切回到前一个内层PageView页面，导致WebView无法流畅滚动。

外层PageView代码：

PageView(
  scrollDirection: Axis.horizontal,
  children: [
    StatefulPageview(  //Displays vertical pageview
      articles: state.articles,
      currentPage: currentStare,
    ),
    ArticleWebView(  //Displays webview
      url: 'www.google.com',
    ),
  ],
);

尝试过的自定义ScrollPhysics方案（未生效）：

class StickyPageViewScrollPhysics extends PageScrollPhysics {
  const StickyPageViewScrollPhysics({ScrollPhysics? parent})
      : super(parent: parent);

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

  @override
  SpringDescription get spring => const SpringDescription(
    mass: 100, 
    stiffness: 1000,
    damping: 10.0, 
  );
}

方案1：动态控制外层PageView的滚动物理效果 #

给外层PageView绑定控制器，监听当前页面索引，当切换到WebView页面时，禁用外层PageView的滚动能力，切回内层PageView时恢复。

代码示例：

final PageController _outerPageController = PageController();
int _currentOuterPage = 0;

@override
void initState() {
  super.initState();
  _outerPageController.addListener(() {
    setState(() {
      _currentOuterPage = _outerPageController.page?.round() ?? 0;
    });
  });
}

// 修改后的外层PageView
PageView(
  controller: _outerPageController,
  scrollDirection: Axis.horizontal,
  physics: _currentOuterPage == 1 
      ? const NeverScrollableScrollPhysics() 
      : const PageScrollPhysics(),
  children: [
    StatefulPageview(
      articles: state.articles,
      currentPage: currentStare,
    ),
    ArticleWebView(
      url: 'www.google.com',
    ),
  ],
);

如果需要从WebView切回内层PageView，可以通过按钮等交互触发_outerPageController.jumpToPage(0)。

方案2：给WebView添加手势拦截 #

用GestureDetector包裹WebView，拦截水平方向的滑动手势，避免外层PageView误触发页面切换。

代码示例：

GestureDetector(
  // 拦截水平滑动相关手势
  onHorizontalDragUpdate: (details) {},
  onHorizontalDragEnd: (details) {},
  child: ArticleWebView(
    url: 'www.google.com',
  ),
);

注意：如果WebView本身需要支持水平滚动，此方案不适用。

方案3：通过滚动通知拦截控制 #

使用NotificationListener监听滚动事件，判断当前滚动方向，仅当明确是水平滚动意图时，才让外层PageView响应。

代码示例：

NotificationListener<ScrollNotification>(
  onNotification: (notification) {
    // 当前是WebView页面且滚动方向为垂直时，拦截通知
    if (_currentOuterPage == 1 && notification.metrics.axis == Axis.vertical) {
      return true;
    }
    return false;
  },
  child: PageView(
    controller: _outerPageController,
    scrollDirection: Axis.horizontal,
    children: [
      StatefulPageview(
        articles: state.articles,
        currentPage: currentStare,
      ),
      ArticleWebView(
        url: 'www.google.com',
      ),
    ],
  ),
);

此方案可根据滚动速度、方向等更精准判断用户意图，减少误触发。

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