当前位置: 首页 > news >正文

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

相关文章:

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 fr…...

使用Spark SQL读取阿里云OSS的数据

读OSS数据 创建一个table,并关联OSS目录路径 CREATE TABLE my_table USING parquet OPTIONS (path oss://my_bucket/my_data_dir/dt20230904, -- 关联OSS路径header true, -- 如果Parquet文件包含列名的头部信息,则设置为true,否则设置为f…...

【0235】修改私有内存(private memory)中的MyBEEntry时,st_changecount值前后变化

上一篇: 【0234】PgBackendStatus 记录当前postgres进程的活动状态 1. pg_stat_activity中xxx实时信息如何实现? 客户端(eg:psql)在连接上postmaster之后,postmaster守护进程会fork()一个后端进场(backend process),之后此客户端的所有操作、交互均有此对应的Backen…...

Linux学习命令之source

在Linux中,source命令用于在当前shell环境中执行指定脚本文件中的命令。它通常用于重新加载修改过的shell配置文件,例如.bashrc或.profile,以使更改生效,而不需要退出当前的shell会话。 使用方法为: source 文件路径…...

2342. 数位和相等数对的最大和

我的解法&#xff1a; 对数组进行排序&#xff0c;最大数一定最先进入哈希表进行加和 class Solution { public:int maximumSum(vector<int>& nums) {unordered_map<int, vector<int>> h;int ans -1;sort(nums.begin(), nums.end());for (int i nums.…...

FISCO BCOS 3.0【01】搭建第一个区块链网络

官方技术文档&#xff1a;https://fisco-bcos-doc.readthedocs.io/zh-cn/latest/index.html 我们在官方技术文档的基础上&#xff0c;进行&#xff0c;对文档中一些不清楚的地方进行修正 搭建Air版本FISCO BCOS联盟链 本节以搭建单群组FISCO BCOS链为例操作&#xff0c;使用开…...

UE4动作游戏实例RPG Action解析四:装备系统

导语: 以加血道具为例,详细分析拆解ActionRPG的装备系统,包含装备系统需求和数据结构设计,以及实现 一、装备系统需求: 装备槽: 已获取装备和未获取装备: 当已经装备一个道具时,再次捡到道具,会把道具放在装备库,不会放在装备槽中, 当没有装备道具时,会拾取道具…...

AIGC之Stable Diffusion

AIGC是什么? AIGC:Artificial Intelligence Generated Content,生成式人工智能。通俗一点来讲,对AI下达指令任务,通过处理人的自然语言,自动生成图片、视频、音频等等。 Stable Diffusion 官网:https://stablediffusionweb.com/ 介绍:stablediffusionweb.com is an eas…...

PHP接收并处理请求中携带的xml格式的信息

企业微信以xml的形式给服务器发送通知。具体参考&#xff1a;企业微信文档——事件格式 dump(file_get_contents("php://input"));/***string(530) "<xml><ToUserName><![CDATA[ww55ca070cb9b7eb22]]></ToUserName><FromUserName>…...

信息安全相关标准

GB/T 25070-2019 信息安全技术 网络安全等级保护安全设计技术要求 在线预览|GB/T 25070-2019 (gb688.cn) 每一级安全保护环境分为安全计算环境&#xff0c;安全区域边界&#xff0c;安全通信网络。 一级通用安全计算环境 二级通用安全 计算环境 三级 通用安全计算环境 第四级…...

Python入门学习篇(一)——注释变量输入输出

1 注释 1.1 作用 a 方便他人和自己阅读代码 b 告诉编译器这部分内容是不用执行的。1.2 单行注释 # 注释内容1.3 多行注释(引号) 1.3.1 三对双引号 """ 注释内容 """1.3.2 三对单引号 注释内容 1.4 pycharm快捷键使用 ctrl/ 多行注释(以# …...

基于单片机智能液位水位监测控制系统设计

**单片机设计介绍&#xff0c; 基于单片机智能液位水位监测控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的智能液位水位监测控制系统可以用来检测和控制液位的高低&#xff0c;并可以用于水泵的控制和自…...

iOS 添加震动效果

1. AudioServicesPlaySystemSound 较早的系统版本&#xff0c;我们会使用AudioTool.framework。 #import <AudioToolbox/AudioToolbox.h>一般震动 AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);普通短震&#xff08;类似3D Touch的 Peek 反馈 &#xff09; …...

合并word中参考文献-(Endnote生成)

合并word中的 两部分的参考文献引用 Merge Citations in the Word document Original&#xff1a; A is a big character [78-80] and B is another one [81-85] Modified&#xff1a; A and B are big characters [78-85] Solutions&#xff1a; Remove the space betwee…...

linux(centos7)常用命令 开启关闭防火墙

查看防火墙状态 centos7 systemctl status firewalld.service 运行上述命令后&#xff0c;如果看到有绿色字样标注的“active&#xff08;running&#xff09;”&#xff0c;说明防火墙是开启状态。 开启防火墙 centos7 systemctl start firewalld.service 关闭防火墙 c…...

数据结构与算法面试题——C++

自己在秋招过程中遇到的数据结构与算法方面的面试题 数据结构 vector vector是⼀种序列式容器&#xff0c;与array唯⼀差别就是对于空间运⽤的灵活性 array占⽤的是静态空间&#xff0c;⼀旦配置了就不可以改变⼤⼩&#xff0c;如果遇到空间不⾜的情况还要⾃⾏创建更⼤的空间…...

数字音频工作站FL Studio21.1中文版本如何下载?

在现在这个数字音乐时代&#xff0c;各种音乐中都或多或少有些电子音乐的影子&#xff0c;或是合成器音色、或是通过数字效果器制作出的变幻莫测的变化效果。而小马丁、Brooks、Eliminate等众多电子音乐巨头便是使用FL Studio来制作音乐的。今天小编就以FL Studio五年的资深用户…...

Linux 无名管道实现文件复制

无名管道 通过一个管道&#xff08;假象&#xff09;进行传输数据&#xff0c;但是这个管道的传输方式是单工&#xff08;半双工&#xff09;的&#xff0c;就是这个管道允许进行发送和接受数据&#xff0c;不过不能同时进行。 创建无名管道 这里用到一个pipe&#xff08;&…...

【机器学习】 逻辑回归算法:原理、精确率、召回率、实例应用(癌症病例预测)

1. 概念理解 逻辑回归&#xff0c;简称LR&#xff0c;它的特点是能够将我们的特征输入集合转化为0和1这两类的概率。一般来说&#xff0c;回归不用在分类问题上&#xff0c;但逻辑回归却能在二分类(即分成两类问题)上表现很好。 逻辑回归本质上是线性回归&#xff0c;只是在特…...

算法萌新闯力扣:存在重复元素II

力扣题&#xff1a;存在重复元素II 开篇 这道题是217.存在重复元素的升级版&#xff0c;难度稍微提高。通过这道题&#xff0c;能加强对哈希表和滑动窗口的运用。 题目链接:219.存在重复元素II 题目描述 代码思路 1.利用哈希表&#xff0c;来保存数组元素及其索引位置 2.遍…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...

Linux操作系统共享Windows操作系统的文件

目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项&#xff0c;设置文件夹共享为总是启用&#xff0c;点击添加&#xff0c;可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download&#xff08;这是我共享的文件夹&#xff09;&…...

Java中栈的多种实现类详解

Java中栈的多种实现类详解&#xff1a;Stack、LinkedList与ArrayDeque全方位对比 前言一、Stack类——Java最早的栈实现1.1 Stack类简介1.2 常用方法1.3 优缺点分析 二、LinkedList类——灵活的双端链表2.1 LinkedList类简介2.2 常用方法2.3 优缺点分析 三、ArrayDeque类——高…...

未授权访问事件频发,我们应当如何应对?

在当下&#xff0c;数据已成为企业和组织的核心资产&#xff0c;是推动业务发展、决策制定以及创新的关键驱动力。然而&#xff0c;未授权访问这一隐匿的安全威胁&#xff0c;正如同高悬的达摩克利斯之剑&#xff0c;时刻威胁着数据的安全&#xff0c;一旦触发&#xff0c;便可…...