有时,Flutter Web 应用程序需要嵌入不由 Flutter 渲染的 Web 内容。例如,嵌入一个 google_maps_flutter 视图(它使用 Google Maps JavaScript SDK)或一个 video_player(它使用标准的 video 元素)。

Flutter Web 可以在 Widget 的范围内渲染任意 Web 内容,并且实现前面提到的示例包所使用的原语可供所有 Flutter Web 应用程序使用。

HtmlElementView

#

HtmlElementView Flutter 小部件在布局中预留了一个空间,用于填充任意 HTML 元素。它有两个构造函数

  • HtmlElementView.fromTagName.
  • HtmlElementViewregisterViewFactory

HtmlElementView.fromTagName

#

The HtmlElementView.fromTagName 构造函数通过 tagName 创建一个 HTML 元素,并提供一个 onElementCreated 方法来配置该元素,然后将其注入到 DOM 中

dart
// Create a `video` tag, and set its `src` and some `style` properties...
HtmlElementView.fromTag('video', onElementCreated: (Object video) {
  video as web.HTMLVideoElement;
  video.src = 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4';
  video.style.width = '100%';
  video.style.height = '100%';
  // other customizations to the element...
});

要了解更多与 DOM API 交互的方式,请查看 package:web 中的 HTMLVideoElement

要了解更多关于转换为 web.HTMLVideoElement 的视频 Object,请查看 Dart 的 JS 互操作性 文档。

HtmlElementViewregisterViewFactory

#

如果您需要更精细地控制注入的 HTML 代码的生成,可以使用 Flutter 用于实现 fromTagName 构造函数的原语。在这种情况下,为需要添加到应用程序的每种 HTML 内容类型注册您自己的 HTML 元素工厂。

结果代码会更冗长,并且每种平台视图类型都有两个步骤

  1. 使用 dart:ui_web 提供的 platformViewRegistry.registerViewFactory 注册 HTML 元素工厂。
  2. 将带有所需 viewType 的小部件 HtmlElementView('viewType') 放置在您应用程序的小部件树中。

有关此方法的更多详细信息,请查看 HtmlElementView 小部件文档。

package:webview_flutter

#

将完整的 HTML 页面嵌入 Flutter 应用程序是一项非常常见的功能,因此 Flutter 团队提供了一个插件来实现此功能