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控件

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

相关推荐
九丝城主10 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
瓜子三百克15 小时前
七、性能优化
flutter·性能优化
恋猫de小郭1 天前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
小蜜蜂嗡嗡1 天前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克1 天前
十、高级概念
flutter
帅次2 天前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡2 天前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉2 天前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian1232 天前
FlutterView 源码解析
flutter
Zender Han2 天前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter