如何禁用Flutter WebView中的点击高亮效果

针对你遇到的WebView内点击按钮/组件出现高亮的问题，有两种常用解决方式：

1. 网页端修改（若网页由你开发） #

直接在网页的CSS中添加禁用高亮的样式：

• 全局禁用所有元素的点击高亮：

body {
  -webkit-tap-highlight-color: transparent;
}

• 针对特定元素（比如按钮）禁用：

button {
  -webkit-tap-highlight-color: transparent;
}

这个属性是WebKit内核的标准属性，Flutter的WebView基于该内核，设置后会直接生效。

2. Flutter端注入样式（若无法修改网页源码） #

使用webview_flutter插件时，通过注入JS代码来动态修改网页样式：

WebView(
  initialUrl: "你的网页地址",
  javascriptMode: JavascriptMode.unrestricted, // 必须开启JS支持
  onWebViewCreated: (WebViewController controller) {
    // 注入JS全局禁用点击高亮
    controller.runJavascript('''
      document.body.style.webkitTapHighlightColor = 'transparent';
      // 可选：针对所有带点击事件的元素单独设置
      document.querySelectorAll('[onclick], a, button').forEach(el => {
        el.style.webkitTapHighlightColor = 'transparent';
      });
    ''');
  },
)

注意：确保已经在pubspec.yaml中正确引入webview_flutter依赖并执行过flutter pub get。

内容的提问来源于stack exchange，提问作者匿名用户