Skip to main content
Contents

将 Web 内容嵌入 Flutter Web 应用

Contents

在某些情况下，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。
  • HtmlElementView 和 registerViewFactory。

HtmlElementView.fromTagName

#

HtmlElementView.fromTagName 构造函数 根据其 tagName 创建一个 HTML 元素，并提供一个 onElementCreated 方法，用于在将元素注入 DOM 之前配置该元素：

dart
// 创建一个 `video` 标签，并设置其 `src` 和一些 `style` 属性...
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%';
  // 元素的其他自定义...
});

要了解与 DOM API 交互的方式，请查看 package:web 中的 HTMLVideoElement 类。

要了解转换为 web.HTMLVideoElement 的 video Object，请查看 Dart 的JS 互操作性 文档。

HtmlElementView 和 registerViewFactory

#

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

生成的代码更冗长，每个平台视图类型有两个步骤：

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

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

package:webview_flutter

#

在 Flutter 应用中嵌入完整的 HTML 页面是一个如此常见的特性，以至于 Flutter 团队提供了一个插件来做到这一点：

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。