Flutter web - 当鼠标悬停在 iframe 的 HtmlElementView 小部件上时，父小部件不会滚动

Question

在 Flutter Web 项目中，我们通过 HtmlElementView 小部件将 Webview 嵌入到列表中。当鼠标悬停在 HtmlElementView 小部件上时，父小部件不会滚动。

我们正在获取网页内容的高度并将该高度分配给容器高度。因此，由于内容高度和容器高度相同，因此没有滚动。但父小部件滚动不会被阻止。

当光标位于 HtmlElementView 内部时，光标根本不会移动。请告诉我是否有解决此问题的方法。下面是我的代码片段，

import 'dart:html' as html;
import 'dart:ui' as ui;

html.window.addEventListener('message', listen);
iframeElement.id = 'extra-frame';
iframeElement.src = webViewModel.guideUrl;
iframeElement.style.border = 'none';

// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
iframeElement.id,
(int viewId) {
return iframeElement;
},
);

Container(
height: webViewModel.webViewHeight != null ? webViewModel.webViewHeight : 300,
child: HtmlElementView(
key: UniqueKey(),
viewType: iframeElement.id,
)
)

Answer 1

如果不需要与 webview 中的内容进行交互，您可以在 Stack 中使用相同大小的 SizedBox 覆盖 HtmlElementView，并使用 PointerInterceptor 小部件包装 SizedBox。

Stack(
  children: [
    Container(
      height: webViewModel.webViewHeight != null ? webViewModel.webViewHeight : 300,
      child: HtmlElementView(
        key: UniqueKey(),
        viewType: iframeElement.id,
      )
    ),
    PointerInterceptor(
      child: SizedBox(
        height:  webViewModel.webViewHeight != null ? webViewModel.webViewHeight : 300,
        width: MediaQuery.of(context).size.width,
        )
      )
  ],
)