跳到主內容

在某些情況下，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 之前對其進行配置。

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 互動方式的更多資訊，請檢視 HTMLVideoElement 類，它位於 package:web 中。

要了解有關被轉換為 web.HTMLVideoElement 的 video Object 的更多資訊，請檢視 Dart 的 JS Interoperability 文件。

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-09-05。 檢視原始碼 或 報告問題。