Flutter Web中InAppWebView导致FloatingActionButton点击失效问题

问题原因 #

Web平台上，InAppWebView底层依赖iframe实现，而iframe的DOM层级默认高于Flutter Web渲染的Canvas画布。这会导致所有鼠标事件被iframe优先捕获，上层的Flutter组件（如AppBar、FloatingActionButton）无法接收到事件触发回调，macOS平台因实现机制不同没有这个问题。

解决方案 #

方案1：调整iframe的z-index层级 #

通过修改InAppWebView对应的iframe样式，降低其z-index，让Flutter的Canvas画布能接收上层组件的事件，同时不影响InAppWebView自身的交互：

1. 引入dart:html和flutter/foundation依赖
2. 在onWebViewCreated回调中定位到目标iframe，调整其样式参数

修改后的代码示例：

import 'dart:html' as html;
import 'package:flutter/foundation.dart' show kIsWeb;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: SelectableText('Three.js Cube  $_counter')),
    drawer: myDrawer(context: context),
    body: Stack(
      children: [
        Positioned.fill(
          child: InAppWebView(
            initialFile: "assets/index.html",
            initialSettings: InAppWebViewSettings(
              javaScriptEnabled: true,
            ),
            onWebViewCreated: (InAppWebViewController controller) {
              _controller = controller;
              if (kIsWeb) {
                // 定位到加载目标HTML的iframe并调整样式
                html.document.querySelectorAll('iframe').forEach((element) {
                  if (element is html.IFrameElement && 
                      element.src?.contains('assets/index.html') == true) {
                    element.style
                      ..zIndex = '-1'
                      ..position = 'absolute'
                      ..top = '0'
                      ..left = '0'
                      ..width = '100%'
                      ..height = '100%';
                  }
                });
              }
            },
          ),
        ),
      ],
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ),
  );
}

方案2：使用PointerInterceptor组件 #

借助pointer_interceptor包，让Flutter组件穿透iframe捕获事件，无需手动修改DOM样式：

1. 在pubspec.yaml中添加依赖：

dependencies:
  pointer_interceptor: ^0.9.3+3

2. 用PointerInterceptor包裹需要响应事件的Flutter组件：

import 'package:pointer_interceptor/pointer_interceptor.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: PointerInterceptor(
      child: AppBar(title: SelectableText('Three.js Cube  $_counter')),
    ),
    drawer: PointerInterceptor(child: myDrawer(context: context)),
    body: InAppWebView(
      initialFile: "assets/index.html",
      initialSettings: InAppWebViewSettings(
        javaScriptEnabled: true
      ),
      onWebViewCreated: (InAppWebViewController controller) {
        _controller = controller;
      },
    ),
    floatingActionButton: PointerInterceptor(
      child: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    ),
  );
}

注意事项 #

• 方案1需要针对Web平台做条件判断，避免在其他平台执行DOM操作引发错误
• 方案2需确保依赖包版本与当前Flutter版本兼容，使用前可查看包的官方说明

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