如何防止 flutter web htmlelementview 捕获其上方对象的触摸？

Question

我正在使用 dart:html 中的 HTML 元素视图在我的 flutter web 应用程序中显示网页。它捕获其区域中的所有触摸，包括其上方 FAB 上的触摸，以及上下文中脚手架抽屉上的触摸。我什至不需要在 webview 上进行触摸输入，我只想显示它。另外，请注意 absorbpointer 和 ignorepointer 不能解决问题。这是在脚手架主体内显示网页的代码。

final IFrameElement _iframeElement = IFrameElement();
_iframeElement.src = "webpageurl";
_iframeElement.style.border = 'none';
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
  'iframeElement',
  (int viewId) => _iframeElement,
);
Widget _iframeWidget;
_iframeWidget = HtmlElementView(
  key: UniqueKey(),
  viewType: 'iframeElement',
);
return Center(child: IgnorePointer(child: _iframeWidget));

编辑：

final IFrameElement _iframeElement = IFrameElement();
_iframeElement.src = "https://index.hu/";
_iframeElement.style.border = 'none';
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
  'iframeElement',
  (int viewId) => _iframeElement,
);
Widget _iframeWidget;
_iframeWidget = HtmlElementView(
  key: UniqueKey(),
  viewType: 'iframeElement',
);
return Stack(
  children: <Widget>[
    IgnorePointer(
      ignoring: true,
      child: Center(
        child: _iframeWidget,
      ),
    ),
    Container(
      color: Colors.transparent,
    ),
  ],
);

Answer 1

PointerInterceptor 是一个小部件，可防止鼠标事件（在 Web 中）被底层 HtmlElementView 捕获。

Answer 2

如果您还在为 PointerInterceptor 而苦恼，您可以查看包 flutter_dropzone 中的 DropzoneView。当堆叠在 iFrame 上方时，它会阻止点击被底层 iFrame 捕获。

我创建了一个条件堆栈元素，在我需要此行为时放置此 DropzoneView。我只是无法让 PointerInterceptor 工作。

这值得一试。也许这会有所帮助 - 请在此处评论您的体验。

如何防止 flutter web htmlelementview 捕获其上方对象的触摸？

How to prevent flutter web htmlelementview from catching touches from objects above it?

html

dart

flutter

flutter-web