Flutter Epub阅读器：PageView内嵌WebView联动滑动方案求助

我完全懂你这种不想写一堆繁琐JS桥接代码的心情——毕竟优雅、简洁的实现才是我们追求的目标！针对你这个Epub阅读器的滑动交互需求（先滑WebView内的多列内容，到边界后触发PageView切换，单次手势完成），我整理了几个更优的思路，按优雅程度排序：

方案一：利用原生WebView滚动回调（推荐） #

这个方案和你在Android上用overscroll通知的思路一致，直接借助平台原生WebView的滚动监听能力，不需要修改HTML或注入大量JS：

实现步骤： #

1. Android端：

   • 自定义FlutterWebViewClient（或继承WebViewClient），重写onScrollChanged方法：

     @Override
     public void onScrollChanged(WebView view, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
         super.onScrollChanged(view, scrollX, scrollY, oldScrollX, oldScrollY);
         boolean isAtLeft = scrollX <= 0;
         boolean isAtRight = scrollX >= view.getContentWidth() - view.getWidth();
         // 通过MethodChannel发送边界状态到Flutter
         methodChannel.invokeMethod("onWebViewBoundaryChanged", 
             new HashMap<String, Boolean>() {{
                 put("isAtLeft", isAtLeft);
                 put("isAtRight", isAtRight);
             }});
     }
     

   • 在Flutter端注册MethodChannel，接收边界状态并维护两个变量_canScrollPageLeft和_canScrollPageRight。

2. iOS端：

   • 获取WebView的底层UIScrollView，设置代理监听scrollViewDidScroll：

     func scrollViewDidScroll(_ scrollView: UIScrollView) {
         let isAtLeft = scrollView.contentOffset.x <= 0
         let isAtRight = scrollView.contentOffset.x >= scrollView.contentSize.width - scrollView.frame.width
         // 通过MethodChannel发送状态到Flutter
         methodChannel.invokeMethod("onWebViewBoundaryChanged", arguments: [
             "isAtLeft": isAtLeft,
             "isAtRight": isAtRight
         ])
     }
     

3. Flutter端控制PageView滚动：

   • 动态设置PageView的physics属性，根据当前边界状态决定是否允许PageView滚动：

     PageView(
       physics: (_canScrollPageLeft || _canScrollPageRight)
           ? const ClampingScrollPhysics()
           : const NeverScrollableScrollPhysics(),
       // 其他配置...
     )
     

   • 同时，确保WebView的手势识别器优先级高于PageView（通过webview_flutter的gestureRecognizers配置，设置Factory<HorizontalDragGestureRecognizer>并调整优先级）。

这个方案的优势：完全复用平台原生能力，无需修改章节HTML，代码简洁且性能好，和你Android端的原有逻辑对齐。

方案二：极简JS边界监听（无HTML修改） #

如果不想写原生代码，这个方案只需要注入少量JS，且仅在边界状态变化时通信，避免持续发送滚动位置：

实现步骤： #

1. 注入极简JS代码：
   在WebView加载完成后，注入以下JS（无需修改章节HTML，直接在全局监听）：

   let prevLeftState = false;
   let prevRightState = false;
   
   function checkBoundaries() {
     const isLeft = window.scrollLeft <= 0;
     const isRight = window.scrollLeft >= document.body.scrollWidth - window.innerWidth;
     
     if (isLeft !== prevLeftState) {
       prevLeftState = isLeft;
       // 调用Flutter端注册的handler
       window.flutter_inappwebview.callHandler('boundaryUpdate', 'left', isLeft);
     }
     if (isRight !== prevRightState) {
       prevRightState = isRight;
       window.flutter_inappwebview.callHandler('boundaryUpdate', 'right', isRight);
     }
   }
   
   // 监听滚动事件，仅在状态变化时通信
   window.addEventListener('scroll', checkBoundaries);
   // 初始加载时检查一次
   checkBoundaries();
   

2. Flutter端处理回调：
   使用webview_flutter的addJavaScriptHandler注册boundaryUpdate回调，更新_canScrollPageLeft和_canScrollPageRight变量，然后按方案一的方式控制PageView的physics。

这个方案的优势：无需原生开发，仅少量JS代码，通信量极低，比你之前的持续滚动通知方案简洁很多。

方案三：手势识别器优先级协调 #

如果以上方案都不想用，还可以通过Flutter的手势竞技场机制，自定义手势识别器来协调WebView和PageView的滑动：

实现步骤： #

1. 自定义水平拖动识别器：

   class WebViewDragRecognizer extends HorizontalDragGestureRecognizer {
     final WebViewController controller;
     bool _isAtBoundary = false;
   
     WebViewDragRecognizer({required this.controller});
   
     @override
     void acceptGesture(int pointer) {
       // 先检查WebView是否在边界
       controller.evaluateJavascript(source: '''
         window.scrollLeft <= 0 || window.scrollLeft >= document.body.scrollWidth - window.innerWidth
       ''').then((value) {
         _isAtBoundary = value == 'true';
         if (!_isAtBoundary) {
           // 不在边界，自己处理手势，阻止PageView响应
           super.acceptGesture(pointer);
         } else {
           // 在边界，放弃手势，让PageView的识别器接管
           rejectGesture(pointer);
         }
       });
     }
   }
   

2. 配置WebView的手势识别器：

   WebViewWidget(
     controller: controller,
     gestureRecognizers: {
       Factory(() => WebViewDragRecognizer(controller: controller)),
     },
   )
   

这个方案的劣势是需要在手势开始时异步调用JS获取边界状态，可能有轻微延迟，但胜在纯Flutter代码实现。

以上几个方案都能避免你之前反感的繁琐JS桥接逻辑，其中方案一最贴近你Android端的原有实现，也是最优雅的选择。

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