flutter web 中嵌入一个html

介绍

flutter web 支持使用 HtmlElementView嵌入html

import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/cupertino.dart';class WebWidget extends StatelessWidget {const WebWidget({super.key});@overrideWidget build(BuildContext context) {DivElement frame = DivElement();IFrameElement iframe = IFrameElement()..style.width = '100%'..style.height = '100%'..src = 'https://www.baidu.com'..style.border = 'none';frame.append(iframe);// //设置token// StyleElement sFrame = StyleElement();// String script = """localStorage.setItem('token',token)""";// sFrame.innerHtml = script;// frame.append(sFrame);//ignore: undefined_prefixed_nameui.platformViewRegistry.registerViewFactory('hello-world',(int viewId) => frame);return SizedBox(height: 300,child: HtmlElementView(viewType: "hello-world",),);}
}

遇到的问题:

1. dart.ui找不到platformViewRegistry

ui.platformViewRegistry.registerViewFactory报错

通过2种方案解除报错

1.在代码上方添加注释来接触报错

2.在analysis_options里添加设置忽略该错误(不推荐,影响范围大)

2.dart.html报错

dart.html,IFrame,ScriptFrame都是flutter web下的类,如果要以app的方式运行会报错,运行不起来。

解决方案:条件导包

写一个默认的widget在app环境下导入,HtmlElementView在web环境下导入

导致的问题(带来的影响)

触摸事件被HtmlElementView消费了,导致覆盖在HtmlElementView上层的widget响应不了点击事件,直白一点的说就是覆盖在HtmlElementView的button点击不了

解决方案:

有个pointer_interceptor的库专门就是解决这个问题的pointer_interceptor,用PointerInterceptor包裹有需要响应点击的widget

思路是给需要响应点击的widget包裹一个HtmlElementView,覆盖在本身的那个HtmlElementView,以此来阻隔本身的HtmlElementView的点击事件

引用:

Flutter Web 加载html的填坑记录 - 简书

flutter - html editor enhanced alert dialog not working when the dialog placed on editor - Stack Overflow

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/197546.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【diffuser系列】ControlNet

ControlNet: TL;DRControl TypeStableDiffusionControlNetPipeline1. Canny ControlNet1.1 模型与数据加载1.2 模型推理1.3 DreamBooth微调 2. Pose ControlNet2.1 数据和模型加载2.2 模型推理 ControlNet: TL;DR ControlNet 是在 Lvmin Zhang 和 Maneesh Agrawala 的 Adding …

麦克风阵列入门

文章引注: http://t.csdnimg.cn/QP7uC 一、麦克风阵列的定义 所谓麦克风阵列其实就是一个声音采集的系统,该系统使用多个麦克风采集来自于不同空间方向的声音。麦克风按照指定要求排列后,加上相应的算法(排列算法)就可…

漫谈广告机制设计 | 万剑归宗:聊聊广告机制设计与收入提升的秘密(2)

书接上文漫谈广告机制设计 | 万剑归宗:聊聊广告机制设计与收入提升的秘密(1),我们谈到流量作为一种有限资源,其分配方式(或者交易方式)也经历了几个阶段:第一个是谈判定价阶段&#…

线性方程组

线性方程组 设存在线性方程组 { a 1 , 1 x 1 a 1 , 2 x 2 ⋯ a 1 , n x n b 1 a 2 , 1 x 1 a 2 , 2 x 2 ⋯ a 2 , n x n b 2 ⋮ ⋮ a m , 1 x 1 a m , 2 x 2 ⋯ a m , n x n b m \left.\left\{\begin{array}{l}a_{1,1}x_1a_{1,2}x_2\cdotsa_{1,n}x_nb_1\\a_{2,1}…

linux查看资源占用情况常用命令

1. 查看 CPU 使用情况: top这个命令会显示系统中当前活动进程的实时信息,包括 CPU 使用率、内存使用率等。按 q 键退出。 2. 查看内存使用情况: free -m这个命令显示系统内存的使用情况,以兆字节(MB)为…

【预处理详解】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 1. 预定义符号 2. #define定义常量 3. #define定义宏 4. 带有副作用的宏参数 5. 宏替换的规则 6. 宏函数的对比 7. #和## 7.1 #运算符 7.2 ## 运算符 8. 命名约定 …

【Spring总结】注解开发

本篇讲的内容主要是基于Spring v2.5的注解来完成bean的定义 之前都是使用纯配置的方式来定义的bean 文章目录 前言1. Spring v2.5 注解开发定义bean第一步:在需要定义的类上写上注解Component第二步:在Spring Config中定义扫描包第三步:主方法…

企业数字化过程中数据仓库与商业智能的目标

当前环境下,各领域企业通过数字化相关的一切技术,以数据为基础、以用户为核心,创建一种新的,或对现有商业模式进行重塑就是数字化转型。这种数字化转型给企业带来的效果就像是一次重构,会对企业的业务流程、思维文化、…

为什么求职者反感企业招聘用的人才测评?

为什么求职者会对人才测评的不满?大概率是认为性格测评不能完整的定义人的优势,也就是测不准! 这个想法是对的,性格测评并不能100%的展现一个完整的人,目前没有那个测评的信效度能达到如此理想,估计以后也…

Elasticsearch中的语义检索

一、传统检索的背景痛点 和传统的基于关键词的匹配方式不同,语义检索,利用大模型,将文本内容映射到神经网络空间,最终记忆token做检索。 例如想要搜索中国首都,例如数据集中,只有一篇文章在描述北京&#x…

Pandas分组聚合_Python数据分析与可视化

Pandas分组聚合 分组单列和多列分组Series 系列分组通过数据类型或者字典分组获取单个分组对分组进行迭代 聚合应用单个聚合函数应用多个聚合函数自定义函数传入 agg() 中对不同的列使用不同的聚合函数 分组聚合的流程主要有三步: 分割步骤将 DataFrame 按照指定的…

Leetcode经典题目之“双指针交换元素“类题目

1 LC 27. 移除元素 class Solution {public int removeElement(int[] nums, int val) {int nnums.length;int s0;for(int i0;i<n;i){// 只有不等于目标值的时候才会进行交换&#xff0c;然后移动s指针if(nums[i]!val){swap(nums,i,s);}}return s;}void swap(int[]nums, int…

【cpolar】Ubuntu本地快速搭建web小游戏网站,公网用户远程访问

&#x1f3a5; 个人主页&#xff1a;深鱼~&#x1f525;收录专栏&#xff1a;cpolar&#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 目录 前言 1. 本地环境服务搭建 2. 局域网测试访问 3. 内网穿透 3.1 ubuntu本地安装cpolar 3.2 创建隧道 3.3 测试公网访问 4. 配置…

【C++初阶】STL详解(四)vector的模拟实现

本专栏内容为&#xff1a;C学习专栏&#xff0c;分为初阶和进阶两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握C。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;C &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&…

如何解决msvcr100.dll丢失问题?5个实用的解决方法分享

在日常计算机操作过程中&#xff0c;相信不少小伙伴都经历过这样一种困扰&#xff0c;那便是某款应用程序或者游戏无法正常启动并弹出“找不到msvcr100.dll”的提示信息。这类问题让人头疼不已&#xff0c;严重影响到了我们的工作效率和休闲娱乐。接下来&#xff0c;就让小编带…

大数据HCIE成神之路之数学(3)——概率论

概率论 1.1 概率论内容介绍1.1.1 概率论介绍1.1.2 实验介绍 1.2 概率论内容实现1.2.1 均值实现1.2.2 方差实现1.2.3 标准差实现1.2.4 协方差实现1.2.5 相关系数1.2.6 二项分布实现1.2.7 泊松分布实现1.2.8 正态分布1.2.9 指数分布1.2.10 中心极限定理的验证 1.1 概率论内容介绍…

视频合并:掌握视频嵌套合并技巧,剪辑高手的必备秘籍

在视频剪辑的过程中&#xff0c;掌握视频合并的技巧是每个剪辑高手必备的技能之一。通过合理的合并视频&#xff0c;可以增强视频的视觉效果&#xff0c;提高观看体验。 一、视频合并的准备工作 收集素材&#xff1a;在进行视频合并之前&#xff0c;首先需要收集足够的素材&a…

ATTCK实战系列——红队实战(一)

文章目录 网络拓扑环境搭建外网渗透信息收集端口扫描目录扫描 漏洞利用phpmyadmin拿shellgeneral_log_file写一句话蚁剑连接 网站后台拿shell关闭防火墙新建用户&#xff0c;开启3389 内网渗透&#xff08;一&#xff09;CSCS木马上线信息收集hashdumpMimikatz抓取明文密码 权限…

数据结构——树状数组

文章目录 前言问题引入问题分析树状数组lowbit树状数组特性初始化一个树状数组更新操作前缀和计算区间查询 总结 前言 原题的连接 最近刷leetcode的每日一题的时候&#xff0c;遇到了一个区间查询的问题&#xff0c;使用了一种特殊的数据结构树状数组&#xff0c;学习完之后我…