Flutter Web中InAppWebView上层弹窗按钮无法点击的解决办法

以下是针对该问题的具体解决方案：

• 禁用Hybrid Composition
  Flutter Web环境下，useHybridComposition是为移动端设计的属性，启用后会导致WebView渲染层级异常，拦截上层Flutter弹窗的触摸事件。直接移除该配置或设置为false即可：

  initialSettings: InAppWebViewSettings(
    // 移除useHybridComposition配置，或设置为false
    transparentBackground: true,
    javaScriptEnabled: true,
    supportMultipleWindows: true,
  ),
  

• 控制WebView的指针事件接收
  当弹窗显示时，让WebView暂时不接收触摸事件，确保弹窗事件能正常触发。可以用AbsorbPointer组件包裹WebView，通过变量控制是否拦截事件：

  // 定义变量控制弹窗显示状态
  bool _showPopup = false;
  
  // 包裹WebView的代码
  Expanded(child: AbsorbPointer(
    absorbing: _showPopup, // 弹窗显示时拦截WebView的指针事件
    child: Container(
      padding: EdgeInsets.only(top: dimen5),
      decoration: BoxDecoration(color: Colors.white),
      child: InAppWebView(
        key: webViewKey,
        initialData: InAppWebViewInitialData(data: getHtmlContent()),
        initialSettings: InAppWebViewSettings(
          transparentBackground: true,
          javaScriptEnabled: true,
          supportMultipleWindows: true,
        ),
        onWebViewCreated: (controller) {
          webViewController = controller;
        },
      ),
    ),
  ))
  

  弹出弹窗时将_showPopup设为true，关闭后设为false即可。

• 确保弹窗的顶层渲染
  使用Flutter官方的showDialog、showModalBottomSheet等方法弹出弹窗，这类方法默认会将弹窗置于所有Widget之上。如果必须用Stack嵌套，需确保弹窗组件在WebView组件之后声明（后声明的Widget层级更高）。

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