Flutter WebView如何禁用点击事件但保留滚动功能？

你的代码里用了AbsorbPointer(absorbing: true)，这个组件会完全拦截所有指针事件，包括滚动，所以点击和滚动都被禁用了。下面提供两种可行的解决方法：

方案1：注入JavaScript禁用页面点击（推荐） #

通过在Web页面加载完成后注入JS代码，阻止页面内所有元素的点击交互，同时保留页面滚动功能。

修改后的代码示例：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: AppColors.appbarColor,
      title: const Text('Terms of Service'),
    ),
    body: WebViewWidget(
      controller: _controller
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..setNavigationDelegate(
          NavigationDelegate(
            onPageFinished: (String url) {
              // 注入JS代码禁用页面点击
              _controller.runJavaScript('''
                // 全局阻止点击事件的默认行为和传播
                document.addEventListener('click', function(e) {
                  e.preventDefault();
                  e.stopPropagation();
                }, true);
                // 确保页面可以正常滚动
                document.body.style.overflow = 'auto';
                // 可选：禁用所有元素的点击响应（更彻底）
                document.querySelectorAll('*').forEach(el => {
                  el.style.pointerEvents = 'none';
                });
              ''');
            },
            onNavigationRequest: (NavigationRequest request) {
              if (request.url.startsWith('https://www.youtube.com/')) {
                return NavigationDecision.prevent;
              }
              return NavigationDecision.navigate;
            },
          ),
        ),
    ),
  );
}

方案2：通过手势识别器控制（纯Flutter层面处理） #

利用WebView的gestureRecognizers参数，只允许滚动类手势传递给WebView，拦截点击等其他手势。

首先导入手势包：

import 'package:flutter/gestures.dart';

修改后的WebViewWidget部分代码：

WebViewWidget(
  gestureRecognizers: {
    // 允许垂直滚动手势
    Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer()),
    // 如果需要水平滚动，取消注释下面一行
    // Factory<HorizontalDragGestureRecognizer>(() => HorizontalDragGestureRecognizer()),
  },
  controller: _controller
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setNavigationDelegate(
      NavigationDelegate(
        onNavigationRequest: (NavigationRequest request) {
          if (request.url.startsWith('https://www.youtube.com/')) {
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ),
    ),
)

两种方案对比 #

• 方案1：能精确控制Web页面内部的交互，适合需要彻底禁用页面点击的场景
• 方案2：从Flutter手势层面拦截，适合不需要操作Web内容、仅展示的场景

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