flutter开发实战-flutter web加载html及HtmlElementView的使用

flutter开发实战-flutter web加载html及HtmlElementView的web控件

HtmlElementView 是 Flutter 中用于嵌入 HTML 内容的 widget。这个 widget 允许你将一个 HTML 元素嵌入到 Flutter 应用中。

一、HtmlElementView基本使用

在工程的pubspec.yaml中引入插件

复制代码
HtmlElementView(
          viewType: 'my-html-element-view-type',
        )

其中viewType 是一个字符串,它告诉 Flutter 和宿主环境如何识别和嵌入的 HTML 元素。

要注意的是,HtmlElementView 目前只能在 Web 平台上工作,也就是说它只能在 Flutter 的 Web 应用中使用。在移动设备或桌面应用中是无法使用的。

二、ui.platformViewRegistry

使用HtmlElementView的同时,我们需要使用ui.platformViewRegistry来传入html的元素。HtmlElement()是基类,可以更加需要传入IFrameElement、HtmlHtmlElement、MediaElement、BodyElement等等元素。

需要注意的是HtmlElementView的viewType与registerViewFactory需要保持一致

  • 加载URL IFrameElement

    ui.platformViewRegistry.registerViewFactory('html-viewType',
    (int viewId) => IFrameElement()
    ..style.border = 'none'
    ..src = 'https://www.baidu.com');

加载URL需要http或者https这scheme,请写全。

  • 加载Assets中HTML IFrameElement

    ui.platformViewRegistry.registerViewFactory('html-viewType',
    (int viewId) => IFrameElement()
    ..style.border = 'none'
    ..src = '/assets/test2.html');

  • 加载Html字符串 HtmlHtmlElement

    ui.platformViewRegistry.registerViewFactory('html-viewType',
    (int viewId) => HtmlHtmlElement()
    ..style.border = 'none'
    ..setInnerHtml(html));

使用HtmlHtmlElement可以加载篇幅较短的html字符串。

  • 加载图片 ImageElement

    ui.platformViewRegistry.registerViewFactory('html-viewType',
    (viewId) => ImageElement()
    ..src = 'https://example.com/image.png'
    ..style.width = '100px'
    ..style.height = '100px',);

使用ui.platformViewRegistry.registerViewFactory可能会报错。需要引入dart.html

三、使用flutter build web

使用命令进行打包

复制代码
flutter build web --web-renderer html

四、小结

flutter开发实战-flutter web加载html及HtmlElementView的web控件

学习记录,每天不停进步。

相关推荐
方文_12 小时前
flutter~loading效果
flutter
唯有选择13 小时前
让你的应用界面好看的基石:Flutter主题Theme使用和扩展自定义字段
前端·flutter
sunly_17 小时前
Flutter:导航固定背景图,滚动时导航颜色渐变
android·javascript·flutter
恋猫de小郭20 小时前
为什么跨平台框架可以适配鸿蒙,它们的技术原理是什么?
android·前端·flutter
SY.ZHOU20 小时前
详细讲解Flutter GetX的使用
flutter
sunly_20 小时前
Flutter:下拉框选择
flutter
明似水20 小时前
用 Melos 解决 Flutter Monorepo 的依赖冲突:一个真实案例
前端·javascript·flutter
张风捷特烈21 小时前
每日一题 Flutter#5,6 | 两道 Widget 选择题
android·flutter
玖夜Kty1 天前
国内环境修改 flutter.bat 来设置 flutter 的网络环境
flutter
LinXunFeng1 天前
Flutter - GetX Helper 助你规范应用 tag
flutter·github·visual studio code