加载 HTML 文件并在 Flutter Web 中显示

Posted 2023-02-23

【中文标题】加载 HTML 文件并在 Flutter Web 中显示

【英文标题】：Load HTML file and display in Flutter Web

【发布时间】：2020-06-29 02:15:40

【问题描述】：

我有一个 html 文件，其中包含一些 JS 函数和 CSS 样式。

是否可以将我的 html 文件加载到 Flutter Web 上的嵌入式小部件中？我已经使用 flutter_webview 包在 ios 和 android 上成功完成了这项工作，但还没有找到 Flutter Web 的解决方案。

【参考方案1】：

有一个HTMLElementViewwidget可以帮助你在flutter web中嵌入Html。此小部件可以采用 Iframe 并呈现它。如果您不喜欢 Iframe，则可以直接从 dart:html 库中嵌入 BodyElement。

嵌入 iframe 的一个示例是availabel here。尽管它来自旧的仓库，但代码是有效的，我找不到最新的。

如果您不想走强硬路线，可以使用来自 Rodydavis 的简化小部件 here，名为 easy_web_view。

如果您仍然需要代码示例创建简单的飞镖垫并共享 MRE，我会尽力提供帮助。 :)

【讨论】：

我想试试你的答案，你能举个例子吗？

“嵌入 iframe 示例”的链接已损坏！ =/

对不起，我没能很快找到最新的例子。找到后我会更新。

【参考方案2】：

对于 iframe 示例，您可以这样做

首先，导入 'ui' 库和 'html' 库。

import 'dart:ui' as ui;
import 'dart:html';

其次，以 viewType 'test-view-type' 为例注册你的 'Iframe'。

ui.platformViewRegistry.registerViewFactory(
    'test-view-type',
    (int viewId) => IFrameElement()
      ..width = '640'
      ..height = '360'
      ..src = "https://www.youtube.com/embed/5VbAwhBBHsg"
      ..style.border = 'none');

注意：你会注意到编译器找不到platformViewRegistry方法，但是如果你选择Debug anyway也没关系，它会正常运行没有任何问题。

最后，使用HtmlElementView 小部件来运行这个Iframe

return Scaffold(
    body: Column(
  children: [
    Text('Testing Iframe with Flutter'),
    HtmlElementView(viewType: 'test-view-type'),
  ],
));