Question

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

是否可以将我的html文件加载到Flutter Web上的嵌入式小部件中？我已经使用flutter_webview pacakge在iOS和Android上成功完成了此任务，但是还没有找到Flutter Web的解决方案。

Answer 1

有一个HTMLElementView widget可以帮助您将HTML嵌入Flutter网站。该小部件可以使用iframe并进行渲染。如果您不喜欢iframe，则可以直接从BodyElement库中嵌入dart:html。

嵌入iframe的示例是availabel here。尽管它来自旧的回购协议，但是代码是有效的，我找不到最新的代码。

如果您不想做艰难的事情，可以从Rodydavis那里获得一个简化的小部件，here提供了这个小部件，名为easy_web_view。

如果您仍然需要代码示例，请创建一个简单的飞镖垫并共享MRE，我将尽力提供帮助。：）

Answer 2

对于 Iframe 示例，您可以执行以下操作

首先，导入“ui”库和“html”库。

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

其次，将您的“Iframe”注册为 viewType 'test-view-type' 为例。

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 就可以了，它会正确运行而没有任何问题。< /p>

最后，使用 HtmlElementView 小部件运行此 Iframe

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

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

2 个答案: