在 Flutter Web 应用中嵌入 Web 内容
在某些情况下,Flutter Web 应用需要嵌入非 Flutter 渲染的 Web 内容。例如,嵌入 google_maps_flutter
视图(它使用 Google Maps JavaScript SDK)或 video_player
(它使用标准的 video
元素)。
Flutter Web 可以在 Widget
的边界内渲染任意 Web 内容,并且前面提到的示例包所使用的基础组件可供所有 Flutter Web 应用使用。
HtmlElementView
#HtmlElementView
Flutter widget 会在布局中预留一个空间,用于填充任何 HTML 元素。它有两种构造函数:
HtmlElementView.fromTagName
.HtmlElementView
和registerViewFactory
。
HtmlElementView.fromTagName
#HtmlElementView.fromTagName 构造函数
根据 tagName
创建一个 HTML 元素,并提供一个 onElementCreated
方法,用于在将该元素注入 DOM 之前对其进行配置。
// 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 交互方式的更多信息,请查看 HTMLVideoElement
类,它位于 package:web
中。
要了解有关被转换为 web.HTMLVideoElement
的 video Object
的更多信息,请查看 Dart 的 JS Interoperability
文档。
HtmlElementView
和 registerViewFactory
#如果您需要更多地控制您注入的 HTML 代码的生成,可以使用 Flutter 用于实现 fromTagName
构造函数的基础组件。在这种情况下,为需要添加到您的应用中的每种类型的 HTML 内容注册您自己的 HTML 元素工厂。
生成的代码更冗长,并且每个平台视图类型需要两个步骤:
- 使用
dart:ui_web
提供的platformViewRegistry.registerViewFactory
注册 HTML 元素工厂。 - 在您的应用的小部件树中,使用
HtmlElementView('viewType')
放置具有所需viewType
的小部件。
有关此方法的更多详细信息,请参阅 HtmlElementView
小部件文档。
package:webview_flutter
#在 Flutter 应用中嵌入完整的 HTML 页面是一项非常常见的功能,因此 Flutter 团队提供了一个插件来实现它。