將網頁內容嵌入到 Flutter 網頁應用程式中

在某些情況下，Flutter 網頁應用程式需要嵌入非 Flutter 渲染的網頁內容。例如，嵌入一個 google_maps_flutter 視圖 (使用 Google Maps JavaScript SDK) 或一個 video_player (使用標準的 video 元素)。

Flutter 網頁可以在 Widget 的邊界內渲染任意網頁內容，並且先前提到範例套件使用的基本元素，可供所有 Flutter 網頁應用程式使用。

HtmlElementView Flutter 小工具會在版面配置中保留空間，以填入任何 HTML 元素。它有兩個建構函式

• HtmlElementView.fromTagName.
• HtmlElementView 和 registerViewFactory。

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 的影片 Object，請查看 Dart 的 JS 互操作性 文件。

如果您需要更多控制權來產生您注入的 HTML 程式碼，您可以使用 Flutter 用於實作 fromTagName 建構函式的基本元素。在這種情況下，為需要新增至應用程式的每個 HTML 內容類型註冊您自己的 HTML 元素工廠。

產生的程式碼更冗長，並且每個平台視圖類型都有兩個步驟

1. 使用 dart:ui_web 提供的 platformViewRegistry.registerViewFactory 註冊 HTML 元素工廠。
2. 使用您應用程式小工具樹中的所需 viewType 和 HtmlElementView('viewType') 放置小工具。

若要深入了解此方法，請查看 HtmlElementView 小工具 文件。

將完整的 HTML 頁面嵌入到 Flutter 應用程式中是很常見的功能，因此 Flutter 團隊提供了一個外掛程式來執行此操作

• package:webview_flutter

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-11-07。 檢視原始碼 或 回報問題。