当前位置: 首页 > 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.遍…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

Ubuntu系统复制(U盘-电脑硬盘)

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...