Flutter Web中WebView忽略Stack布局，上层按钮无法点击

在Flutter Web平台上，webview_flutter_web的WebView本质是HTML的iframe，默认会拦截所有鼠标事件，导致Stack上层的MaterialButton无法接收点击，转而触发WebView的交互。可以通过以下两种方式解决：

方法一：配置WebView的手势识别器 #

给WebView添加gestureRecognizers参数，让手势系统优先将点击事件传递给上层按钮，仅当没有上层组件响应时，WebView才处理手势：

首先导入手势相关依赖：

import 'package:flutter/gestures.dart';

修改WebView代码：

WebView(
  initialUrl: 'https://flutter.dev',
  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
    Factory<OneSequenceGestureRecognizer>(
      () => TapGestureRecognizer()..onTapDown = (_) {},
    ),
  },
)

方法二：精准控制WebView的可交互区域 #

如果只需要WebView的部分区域可交互，上层按钮所在区域不需要WebView响应，可以用AbsorbPointer包裹WebView，结合布局条件控制是否拦截事件：

Stack(
  children: [
    AbsorbPointer(
      // 根据按钮位置设置条件，仅在按钮区域外允许WebView交互
      absorbing: true, // 可替换为具体判断逻辑，比如判断点击坐标是否在按钮范围内
      child: WebView(
        initialUrl: 'https://flutter.dev',
      ),
    ),
    Positioned(
      top: 100,
      bottom: 100,
      child: MaterialButton(
        onPressed: () { /* 按钮点击逻辑 */ },
        child: const Text('按钮1'),
      ),
    ),
    Positioned(
      top: 200,
      bottom: 200,
      child: MaterialButton(
        onPressed: () { /* 按钮点击逻辑 */ },
        child: const Text('按钮2'),
      ),
    ),
  ],
)

注：方法一适合WebView整体需要保留交互能力，同时上层按钮可点击的场景；方法二更适合需要精准隔离WebView与按钮交互区域的场景。

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