Flutter WebView iOS侧滑返回手势取消后页面按钮无法点击问题

在iOS平台使用Flutter的InAppWebView组件时，执行侧滑返回手势但中途取消后，WebView页面内的按钮会变为无法点击状态，以下是几种可行的解决办法：

方法一：禁用WebView自带侧滑手势，改用Flutter原生手势处理 #

通过关闭InAppWebView的iOS自带侧滑返回手势，用Flutter的GestureDetector手动实现侧滑返回，避免手势冲突：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      title: const Text("title"),
    ),
    body: Container(
      color: Colors.red,
      child: GestureDetector(
        // 监听水平拖拽结束事件，判断是否触发返回
        onHorizontalDragEnd: (details) {
          if (details.primaryVelocity! > 200) {
            Navigator.of(context).pop();
          }
        },
        child: InAppWebView(
          initialOptions: InAppWebViewGroupOptions(
            android: AndroidInAppWebViewOptions(
              useHybridComposition: true,
            ),
            crossPlatform: InAppWebViewOptions(
              useShouldOverrideUrlLoading: true,
              transparentBackground: true,
              javaScriptEnabled: true,
              mediaPlaybackRequiresUserGesture: false,
            ),
            ios: IOSInAppWebViewOptions(
              // 禁用WebView自带的侧滑返回手势
              allowsBackForwardNavigationGestures: false,
            ),
          ),
          initialUrlRequest: URLRequest(url: Uri.parse("https://www.google.com")),
        ),
      ),
    ),
  );
}

方法二：在返回手势取消时恢复WebView交互 #

如果需要保留WebView自带的侧滑返回，可以通过WillPopScope监听返回逻辑，在手势取消时触发WebView的交互恢复：

late InAppWebViewController _webViewController;

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      bool canGoBack = await _webViewController.canGoBack();
      if (canGoBack) {
        _webViewController.goBack();
        return false;
      }
      // 当无法返回、手势取消时，触发一次DOM点击事件恢复交互
      _webViewController.evaluateJavascript(source: "document.dispatchEvent(new Event('click'));");
      return true;
    },
    child: Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("title"),
      ),
      body: Container(
        color: Colors.red,
        child: InAppWebView(
          onWebViewCreated: (controller) => _webViewController = controller,
          initialOptions: InAppWebViewGroupOptions(
            android: AndroidInAppWebViewOptions(
              useHybridComposition: true,
            ),
            crossPlatform: InAppWebViewOptions(
              useShouldOverrideUrlLoading: true,
              transparentBackground: true,
              javaScriptEnabled: true,
              mediaPlaybackRequiresUserGesture: false,
            ),
            ios: IOSInAppWebViewOptions(),
          ),
          initialUrlRequest: URLRequest(url: Uri.parse("https://www.google.com")),
        ),
      ),
    ),
  );
}

方法三：升级inappwebview包版本 #

该问题可能是旧版本组件的已知bug，检查并升级flutter_inappwebview到最新版本，部分版本已修复此手势冲突问题：

在pubspec.yaml中更新依赖：

dependencies:
  flutter_inappwebview: ^6.0.0 # 替换为当前最新版本

问题原因 #

本质是iOS系统侧滑返回手势与InAppWebView内部的触摸事件处理链发生冲突，当手势中途取消时，WebView的触摸事件传递未正确恢复，导致内部DOM元素无法响应点击。

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