iOS端WebView中无法通过代码触发触摸事件的问题求助

原因分析 #

• iOS平台下，flutter_inappwebview底层基于WKWebView实现，其触摸事件处理完全在原生层独立运行，和Flutter框架的GestureBinding属于两套互不穿透的事件系统。你通过GestureBinding.instance.handlePointerEvent发送的模拟触摸事件，只能触发Flutter组件的手势响应，无法传递到原生WKWebView内部的网页元素。
• Android平台的WebView触摸事件是通过Flutter层转发处理的，所以模拟的PointerEvent能被WebView正常接收，这是跨平台实现差异导致的核心问题。

解决建议 #

方案一：通过JS注入模拟网页点击（跨平台通用） #

利用InAppWebViewController的JS执行能力，直接在网页内部模拟点击事件，这是最安全且兼容的方案：

1. 先获取WebView控制器实例：

InAppWebViewController? webViewController;

// 在InAppWebView的回调中保存控制器
InAppWebView(
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.willyoupressthebutton.com/")),
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      javaScriptEnabled: true,
      preferredContentMode: UserPreferredContentMode.MOBILE,
    ),
  ),
)

2. 修改悬浮按钮的点击逻辑，转换坐标并执行JS：

floatingActionButton: FloatingActionButton(
  onPressed: () async {
    if (webViewController == null) return;
    
    // 将Flutter视图坐标转换为网页内的相对坐标
    final webPoint = await webViewController!.convertPointFromFlutter(
      Point<double>(x, y),
    );
    
    // 执行JS找到对应元素并触发点击
    await webViewController!.evaluateJavascript(source: '''
      const target = document.elementFromPoint(${webPoint.x}, ${webPoint.y});
      if (target) {
        // 同时触发click和触摸事件，兼容不同网页的交互逻辑
        target.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}));
        target.dispatchEvent(new TouchEvent('touchend', {bubbles: true}));
      }
    ''');
  },
  child: const Text("PRESS"),
)

方案二：iOS原生层模拟触摸（仅iOS，有审核风险） #

如果需要模拟更接近原生的触摸行为（比如长按、拖拽），可以通过平台通道调用iOS原生代码，但这种方式涉及私有API，可能影响App Store审核：

1. 定义Flutter平台通道：

static const MethodChannel _touchChannel = MethodChannel('com.example/webview_touch');

// 悬浮按钮点击时调用
floatingActionButton: FloatingActionButton(
  onPressed: () async {
    final absoluteY = y + appBarAndStatusBarHeight - 1;
    await _touchChannel.invokeMethod('simulateTap', {
      'x': x,
      'y': absoluteY,
    });
  },
  child: const Text("PRESS"),
)

2. iOS端Swift代码（需嵌入到项目的原生部分）：

import Flutter
import WebKit

class TouchSimulatorPlugin: NSObject, FlutterPlugin {
    static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(name: "com.example/webview_touch", binaryMessenger: registrar.messenger())
        let instance = TouchSimulatorPlugin()
        registrar.addMethodCallDelegate(instance, channel: channel)
    }

    func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        guard call.method == "simulateTap",
              let args = call.arguments as? [String: Double],
              let x = args["x"], let y = args["y"] else {
            result(FlutterError(code: "INVALID_ARGS", message: "参数错误", details: nil))
            return
        }

        // 查找当前页面的WKWebView实例
        guard let window = UIApplication.shared.keyWindow,
              let webView = window.subviews.first(where: { $0 is WKWebView }) as? WKWebView else {
            result(FlutterError(code: "WEBVIEW_NOT_FOUND", message: "未找到WebView", details: nil))
            return
        }

        // 模拟触摸事件序列
        let touchPoint = CGPoint(x: x, y: y)
        simulateTouch(on: webView, at: touchPoint, phase: .began)
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
            self.simulateTouch(on: webView, at: touchPoint, phase: .ended)
            result(nil)
        }
    }

    private func simulateTouch(on webView: WKWebView, at point: CGPoint, phase: UITouch.Phase) {
        // 注意：此处使用私有API构造触摸事件，存在审核风险
        let touch = UITouch()
        // 通过Runtime设置触摸的位置、视图、阶段等属性（示例简化，实际需完善）
        // ...
        let event = UIEvent(touches: [touch], type: .touches)
        webView.sendEvent(event)
    }
}

关键注意事项 #

• 坐标转换必须准确：Flutter的坐标是相对于自身视图的，必须通过convertPointFromFlutter转换为网页内的坐标，否则点击位置会偏移。
• 多事件兼容：部分网页可能只响应触摸事件（touchstart/touchend）而非鼠标click事件，JS代码中可以同时触发两种事件提升兼容性。

内容的提问来源于stack exchange，提问作者Zoltán