Android端Flutter WebView点击目标错位下移问题求助

核心排查方向与修复手段 #

1. 修正视口与缩放导致的布局偏移 #

• 强制锁定WebView初始缩放比例并禁用缩放，避免页面布局计算偏差：

  final controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadRequest(Uri.parse("你的WebDAV地址"))
    ..setZoomEnabled(false) // 关闭缩放功能
    ..setInitialScale(1.0); // 强制初始缩放为100%
  

• 如果禁用缩放后仍有问题，加载页面后注入JS强制修正视口：

  controller.runJavaScript('''
    const viewport = document.querySelector('meta[name="viewport"]');
    if (viewport) {
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');
    }
  ''');
  

2. 修复Android端触摸事件映射问题 #

• 检查AndroidManifest.xml，确保嵌入模式和屏幕适配参数正确：

  <application
      ...
      android:usesCleartextTraffic="true"> <!-- 允许HTTP明文流量 -->
      <meta-data
          android:name="flutterEmbedding"
          android:value="2" />
      <meta-data
          android:name="android.max_aspect"
          android:value="2.1" />
      ...
  </application>
  

• 切换到SurfaceAndroidWebView实现，解决部分Android版本的触摸偏移：

  if (Platform.isAndroid) {
    WebView.platform = SurfaceAndroidWebView();
  }
  

3. 处理HTTP站点的安全限制 #

• 除了上述的usesCleartextTraffic，还要确保WebView允许HTTP导航：

  controller.setNavigationDelegate(
    NavigationDelegate(
      onNavigationRequest: (req) {
        return req.url.startsWith('http://') ? NavigationDecision.navigate : NavigationDecision.prevent;
      },
    ),
  );
  

4. 排查插件与构建环境 #

• 锁定webview_flutter的稳定版本，避免版本兼容问题：

  dependencies:
    webview_flutter: ^4.4.0 # 替换为最新稳定版
  

• 清理缓存后重新构建：

  flutter clean && flutter pub get && flutter run
  

5. 排除模拟器干扰 #

• 部分模拟器存在触摸坐标映射bug，优先用真实物理设备测试，确认问题是否存在。

内容的提问来源于stack exchange，提问作者William Pacheco Rech