Flutter中PlatformView在鸿蒙中的使用
Flutter中PlatformView在鸿蒙中的使用
- 概述
- 在Flutter中的处理
- 鸿蒙端
- 创建内嵌的鸿蒙视图
- 创建PlatformView
- 创建PlatformViewFactory
- 创建plugin,注册platformview
- 注册插件
概述
集成平台视图(后称为平台视图)允许将原生视图嵌入到 Flutter 应用中,所以你可以通过 Dart 将变换、裁剪和不透明度等效果应用到原生视图。
例如,这使你可以通过使用平台视图直接在 Flutter 应用内部使用鸿蒙中的原生地图。
在Flutter中的处理
首先我们需要再Flutter中创建一个视图,用来加载Ohos平台的view。
import 'dart:async';import 'package:flutter/material.dart';
import 'package:flutter/services.dart';typedef OnViewCreated = Function(CustomViewController);class CustomOhosView extends StatefulWidget {final OnViewCreated onViewCreated;const CustomOhosView(this.onViewCreated, {super.key});State<CustomOhosView> createState() => _CustomOhosViewState();
}class _CustomOhosViewState extends State<CustomOhosView> {late MethodChannel _channel;Widget build(BuildContext context) {return _getPlatformFaceView();}Widget _getPlatformFaceView() {// 加载platformview/*** viewType:传递给Native侧,告知插件需要创建那个PlatformView,这个PlatformView需要在插件初始化时注册。onPlatformViewCreated:PlatformView创建成功时的回调。creationParams:传递给PlatformView的初始化参数。*/return OhosView(viewType: 'com.rex.custom.ohos/customView',onPlatformViewCreated: _onPlatformViewCreated,creationParams: const <String, dynamic>{'initParams': 'hello world'},creationParamsCodec: const StandardMessageCodec(),);}void _onPlatformViewCreated(int id) {print("platformview==================创建成功");_channel = MethodChannel('com.rex.custom.ohos/customView$id');final controller = CustomViewController._(_channel,);widget.onViewCreated(controller);}
}// 用于实现Dart侧与Native侧的交互
class CustomViewController {final MethodChannel _channel;final StreamController<String> _controller = StreamController<String>();CustomViewController._(this._channel,) {_channel.setMethodCallHandler((call) async {switch (call.method) {case 'getMessageFromOhosView':// 从native端获取数据final result = call.arguments as String;_controller.sink.add(result);break;}},);}Stream<String> get customDataStream => _controller.stream;// 发送数据给nativeFuture<void> sendMessageToOhosView(String message) async {await _channel.invokeMethod('getMessageFromFlutterView',message,);}
}
鸿蒙端
创建内嵌的鸿蒙视图
该视图就是我们ohos平台中的组件, 示例代码如下:
@Component
export struct PlatformView_Custom {@Prop params: Params// customView: video_Customview = this.params.platformView as video_Customviewbuild() {Column() {Column() {Button("测试按钮").onClick(() => {console.log("点击按钮时间")})}.backgroundColor(Color.Orange).height('230vp').width('100%').justifyContent(FlexAlign.End)}.backgroundColor(Color.Pink).width('100%').height('100%')}
}
注意:PlatformView_Custom 嵌入到Flutter页面中时, 系统实际上是在我们的这个组件又包裹了一层空间, 并且默认是充满Flutter父空间的全部空间。
创建PlatformView
我们需要创建一个PlatformView的子类,并实现并且实现MethodCallHandler
接口。
该类有两个作用:
- 通过类中的
getView(): WrappedBuilder<[Params]>{}
方法把上面创建的鸿蒙组件加载到这个PlatformView上 - 实现
MethodCallHandler
接口, 负责和Flutter的相关通信
示例代码如下:
/*** @ProjectName : ohos* @FileName : PlatformView_plugin* @Author : issuser* @Time : 2024/10/11 9:33* @Description : 文件描述*/
import {BinaryMessenger,MethodCall, MethodCallHandler, MethodChannel, MethodResult, PlatformView,StandardMethodCodec } from '@ohos/flutter_ohos';
import { Params } from '@ohos/flutter_ohos/src/main/ets/plugin/platform/PlatformView';
import { PlatformView_Custom } from './PlatformView_Custom';
import { common } from '@kit.AbilityKit';export class PlatformView_plugin extends PlatformView implements MethodCallHandler {numValue: string = "test";methodChannel: MethodChannel;index: number = 1;// 构造方法constructor(context: common.Context, viewId: number, args: ESObject, message: BinaryMessenger) {super();// 注册消息通道,消息通道根据具体需求添加,代码仅作为示例this.methodChannel = new MethodChannel(message, `com.rex.custom.ohos/video_CustomView${viewId}`, StandardMethodCodec.INSTANCE);// 给通道添加监听this.methodChannel.setMethodCallHandler(this);}// 实现onMethodCall接口onMethodCall(call: MethodCall, result: MethodResult): void {// 接受Dart侧发来的消息let method: string = call.method;let link1: SubscribedAbstractProperty<number> = AppStorage.link('numValue');switch (method) {case 'video_getMessageFromFlutterView':let value: ESObject = call.args;this.numValue = value;link1.set(value)console.log("nodeController receive message from dart: " + this.numValue);result.success(true);break;}}// 返回鸿蒙要展示的视图getView(): WrappedBuilder<[Params]> {return new WrappedBuilder(platformBuilder)}// 生命周期方法 销毁时dispose(): void {throw new Error('Method not implemented.');}}// 全局的build函数,通过这个bbuilder函数返回我们的组件view
@Builder
function platformBuilder(param: Params) {PlatformView_Custom({params: param}).backgroundColor(Color.Green)
}
创建PlatformViewFactory
PlatformView类的创建是通过PlatformViewFactory
来创建, 所以我们需要创建一个工厂类继承自PlatformViewFactory
。
示例代码:
// 通过工厂方法创建一个plaugin示例
export class CustomFactory extends PlatformViewFactory {message: BinaryMessenger;constructor(message: BinaryMessenger, createArgsCodes: MessageCodec<Object>) {super(createArgsCodes);this.message = message;}public create(context: Context, viewId: number, args: Object): PlatformView {return new PlatformView_plugin(context, viewId, args, this.message);}
}
创建plugin,注册platformview
新建一个继承于FlutterPlugin
的CustomPlugin
插件,在onAttachedToEngine
中,注册自定义的PlatformViewFactory
示例代码:
import { StandardMessageCodec } from '@ohos/flutter_ohos';
import {FlutterPlugin,FlutterPluginBinding
} from '@ohos/flutter_ohos/src/main/ets/embedding/engine/plugins/FlutterPlugin';
import { CustomFactory } from './CustomFactory';export class CustomPlugin implements FlutterPlugin {getUniqueClassName(): string {return 'CustomPlugin'}// 当插件挂载到引擎上时onAttachedToEngine(binding: FlutterPluginBinding): void {// 在插件挂在在引擎的时候, 我们需要注册我们的viewbinding.getPlatformViewRegistry()?.registerViewFactory('com.rex.custom.ohos/customView',new CustomFactory(binding.getBinaryMessenger(), StandardMessageCodec.INSTANCE));}onDetachedFromEngine(binding: FlutterPluginBinding): void {throw new Error('Method not implemented.');}
}
注册插件
在EntryAblitity中注册我们创建的自定义插件:
export default class EntryAbility extends FlutterAbility {configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)GeneratedPluginRegistrant.registerWith(flutterEngine)// 注册platformview的自定义插件this.addPlugin(new CustomPlugin());}
}
然后执行flutter build hap
命令进行编译, 配置相关证书, 运行。
相关文章:
Flutter中PlatformView在鸿蒙中的使用
Flutter中PlatformView在鸿蒙中的使用 概述在Flutter中的处理鸿蒙端创建内嵌的鸿蒙视图创建PlatformView创建PlatformViewFactory创建plugin,注册platformview注册插件 概述 集成平台视图(后称为平台视图)允许将原生视图嵌入到 Flutter 应用…...
Docker—搭建Harbor和阿里云私有仓库
Harbor概述 Harbor是一个开源的企业级Docker Registry管理项目,由VMware公司开发。它的主要用途是帮助用户迅速搭建一个企业级的Docker Registry服务,提供比Docker官方公共镜像仓库更为丰富和安全的功能,特别适合企业环境使用。12 Harb…...
一篇博文了解JVM的各个内存区域
JVM的内存区域可以细分为程序计数器、虚拟机栈、本地方法栈、堆和方法区 其中,方法区和堆是线程共享的,虚拟机栈、本地方法栈和程序计数器是私有的; 先来说说程序计数器,它也被称为PC寄存器,占据着很小的内存空间…...
无监督学习:聚类、异常检测
聚类 工作原因我对聚类特别熟悉,因此视频课程基本快进看完,不做记录 异常检测 高斯(正态)分布 多特征异常检测 将每个特征作为独立特征(实践证明即使不完全独立也影响不大)计算高斯分布的参数,然后将待预估样本代入…...
pdf与ofd的区别详细对比
PDF(Portable Document Format)和OFD(Open Fixed-layout Document)是两种常见的电子文档格式,它们在设计理念、技术实现、应用场景等方面存在显著差异。以下是对这两种格式的详细对比分析,涵盖其历史背景、…...
DDD架构实战第六讲总结:领域驱动设计中的聚合
云架构师系列课程之DDD架构实战第六讲总结:领域驱动设计中的聚合 聚合提升了对象系统的粒度,保证了业务逻辑的完整性,减少了错误产生的概率 一、引言 本讲将探讨领域驱动设计(DDD)中的重要概念——聚合。聚合是业务完整性的单元,是一个更大力度的封装。在领域驱动设计中…...
CentOS7使用源码安装PHP8教程整理
CentOS7使用源码安装PHP8教程整理 下载安装包解压下载的php tar源码包安装所需的一些依赖扩展库安装前的配置修改配置文件1、进入php8的安装包 配置环境变量开机自启启动服务创建软连接常见问题1、checking for icu-uc > 50.1 icu-io icu-i18n... no2、configure: error: Pa…...
vue3中自定一个组件并且能够用v-model对自定义组件进行数据的双向绑定
1. 基础用法 在 Vue3 中,v-model 在组件上的使用有了更灵活的方式。默认情况下,v-model 使用 modelValue 作为 prop,update:modelValue 作为事件。 1.1 基本示例 <!-- CustomInput.vue --> <template><input:value"mo…...
【win11】解决msrdc.exe窗口启动导致周期性失去焦点
msrdc.exe randomly stealing focus 最近写代码时,经常出现周期性失去焦点的情况非常恼人,不确定是否是Q4的微软更新引起?换了输入法也不行,只能借助工具来查看:大神的工具非常好: 可以发现是remote app 启动了一个UI…...
【2024年终总结】深圳工作生活评测
距离上次写年终总结已经过了一年半了,这一年半中哪怕经历了很多的事情,但是感觉又没发生什么。想写一些骚话,却总觉得自己无法完全表达,便也就这样,静静地记录下这一段时光。 现在是2025年,春节前的时光&am…...
【29】Word:李楠-学术期刊❗
目录 题目 NO1.2.3.4.5 NO6.7.8 NO9.10.11 NO12.13.14.15 NO16 题目 NO1.2.3.4.5 另存为手动/F12Fn光标来到开头位置处→插入→封面→选择花丝→根据样例图片,对应位置填入对应文字 (手动调整即可)复制样式:开始→样式对话框→管理…...
npm常用命令
以往nodejs版本 Node.js — Node.js 版本 CNPM Binaries Mirror 查看当前版本 npm -v 查看node安装在哪里 where node 清除缓存 npm cache clean --force 淘宝镜像(只支持下载,不支持上传发布) npm config set registry https://reg…...
安装最小化的CentOS7后,执行yum命令报错Could not resolve host mirrorlist.centos.org; 未知的错误
文章目录 安装最小化的CentOS7后,执行yum命令报错"Could not resolve host: mirrorlist.centos.org; 未知的错误"错误解决方案: 安装最小化的CentOS7后,执行yum命令报错"Could not resolve host: mirrorlist.centos.org; 未知…...
现代 JavaScript 的入门教程
现代 JavaScript 的定义 现代 JavaScript 通常指的是自 ECMAScript 2015(也称为 ES6)以来的一系列语言更新和改进,以及随之而来的开发工具、库和框架的生态系统。这些变化不仅增强了 JavaScript 的功能性和表达能力,还推动了更高…...
linux naive代理设置
naive linux客户端 Release v132.0.6834.79-2 klzgrad/naiveproxy GitHub Client setup Run ./naive with the following config.json to get a SOCKS5 proxy at local port 1080. {"listen": "socks://127.0.0.1:1080","proxy": "htt…...
Java数据结构 (链表反转(LinkedList----Leetcode206))
1. 链表的当前结构 每个方框代表一个节点,每个节点包含两个部分: 左侧的数字:节点存储的值,例如 45、34 等。右侧的地址(如 0x90):表示该节点 next 指针指向的下一个节点的内存地址。 例子中&a…...
游戏与硬件深度协同,打造更精细的体验优化
高画质的游戏往往带来手机的发热和卡顿从而影响游戏体验。开发者希望能够获取到手机运行的实时状态,从而能够进行主动的负载调节,将手机发热时游戏体验影响降到最低;同时手机也可以通过游戏传入的关键场景如"正在下载资源"“团战中…...
C++实现设计模式---命令模式 (Command)
命令模式 (Command) 命令模式 是一种行为型设计模式,它将请求封装为一个对象,从而使得可以用不同的请求对客户端进行参数化、对请求排队或记录日志,以及支持可撤销的操作。 意图 将操作的调用者与接收者分离,通过将请求封装为独…...
office 2019 关闭word窗口后卡死未响应
最近关闭word文件总是出现卡死未响应的状态,必须从任务管理器才能杀掉word 进程,然后重新打开word再保存,很是麻烦。(#其他特征,在word中打字会特别变慢,敲击键盘半秒才出现字符。) office官网…...
flutter入门系列教程<三>:tabbar的高度自适用,支持无限滚动
背景 在之前的文章中,简介了tabbar组件的使用,它通常用于顶部放置tabbar标签页头,内容全部都是TabbarView的全部内容,且内容通常是占满屏幕的(尽可能大),如下: 但是有时候我们需要…...
前端三件套详解之 HTML
HTML: 师承b站pink老师【黑马程序员pink老师前端入门教程,零基础必看的h5(html5)css3移动端前端视频教程】 HTML概述 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创…...
【pytorch 】miniconda python3.11 环境安装pytorch
ubuntu24.04 miniconda python3.11 环境安装pytorch 组件:langgraph本身不需要有一些模型是需要的:python3.11环境:报错ModuleNotFoundError: No module named ‘torchaudio’ ModuleNotFoundError: No module named ‘torchaudio’File "/root/miniconda3/envs/05_ep_…...
支持大功率输出高速频闪的图像处理用光源控制器
机器视觉系统中的光源控制器在确保图像质量、提高系统稳定性、降低能耗以及方便系统扩展和升级等方面发挥着重要作用。它可提供稳定光源,调节参数,另外具有操作便捷性。 下面我们来看Gardasoft的光源控制器,Gardasoft拥有作为图像处理用LED光…...
使用 Python 和 Tesseract 实现验证码识别
验证码识别是一个常见且实用的技术需求,尤其是在自动化测试和数据采集场景中。通过开源 OCR(Optical Character Recognition,光学字符识别)工具 Tesseract,结合 Python 的强大生态,我们可以高效实现验证码识…...
Opencv学习
Long time no see!哈哈,假期终于有时间做一点自己喜欢的东西了 还是想说,每天花一点时间投在自己喜欢的事情上,或者专攻一些平时不学的方向,真的很酷! 图片绘制 对于图像绘制,可以分为:图像创…...
数学大模型MAmmoTH:通过混合说明调整建立数学通才模型
向悦和陈文虎是该项目的主要作者。他们这个项目推出 MAmmoTH,这是一系列专为解决一般数学问题而定制的开源大型语言模型 (LLM)。 MAmmoTH 模型在 MathInstruct 上进行训练,MathInstruct 是我们精心策划的指令调整数据集。 MathInstruct 已编译 来自 13 个…...
springboot 配置多数据源以及动态切换数据源
场景 我们springboot项目,通常会有多个数据库,例如mysql,vertica,postgresql等等数据库,通常我们需要动态切换使用我们想要的数据库,这时候就需要配置多数据源了 多数据源特性 支持多数据库类型:例如,同…...
计算机图形学:实验三 光照与阴影
一、程序功能设计 设置了一个3D渲染场景,支持通过键盘和鼠标控制交互,能够动态调整光源位置、物体材质参数等,具有光照、阴影和材质效果的场景渲染。 OpenGL物体渲染和设置 创建3D物体:代码中通过 openGLObject 结构体表示一个…...
idea修改模块名导致程序编译出错
本文简单描述分别用Idea菜单、pom.xml文件管理项目模块module 踩过的坑: 通过idea菜单创建模块,并用idea菜单修改模块名,结构程序编译报错,出错的代码莫名奇妙。双击maven弹窗clean时,还是报错。因为模块是新建的&am…...
Arcgis国产化替代:Bigemap Pro正式发布
在数字化时代,数据如同新时代的石油,蕴含着巨大的价值。从商业决策到科研探索,从城市规划到环境监测,海量数据的高效处理、精准分析与直观可视化,已成为各行业突破发展瓶颈、实现转型升级的关键所在。历经十年精心打磨…...
RNN实现阿尔茨海默症的诊断识别
本文为为🔗365天深度学习训练营内部文章 原作者:K同学啊 一 导入数据 import torch.nn as nn import torch.nn.functional as F import torchvision,torch from sklearn.preprocessing import StandardScaler from torch.utils.data import TensorDatase…...
大数据学习(36)- Hive和YARN
&&大数据学习&& 🔥系列专栏: 👑哲学语录: 承认自己的无知,乃是开启智慧的大门 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言📝支持一下博主哦ᾑ…...
【以音频软件FFmpeg为例】通过Python脚本将软件路径添加到Windows系统环境变量中的实现与原理分析
在Windows系统中,你可以通过修改环境变量 PATH 来使得 ffmpeg.exe 可在任意路径下直接使用。要通过Python修改环境变量并立即生效,如图: 你可以使用以下代码: import os import winreg as reg# ffmpeg.exe的路径 ffmpeg_path …...
计算机的错误计算(二百二十一)
摘要 利用一个数学解题器化简计算 实验表明,即使是数学解题器,也是一派胡言。 有一读者来信,询问数学大模型的推理事宜。现就前面的案例继续做一讨论。 例1. 化简计算摘要中算式。 下面是与一个数学解题器的对话。 点评: &am…...
小利特惠源码/生活缴费/电话费/油卡燃气/等充值业务类源码附带承兑系统
全新首发小利特惠/生活缴费/电话费/油卡燃气/等充值业务类源码附带U商承兑系统 安装教程如下 图片:...
外部flash烧写算法学习笔记(一)
一,STM32CubeProgrammer STM32下载编程工具 | STM32CubeProg介绍、下载、安装和使用教程 - 知乎 1.使用速览 2.外部烧写 二,QSPI外部烧写算法制作 STM32H7的花式玩转SPI Flash章节也更新了,含MDK下载算法制作和STM32CubeProg下载算法制作 …...
嵌入式MCU面试笔记2
目录 串口通信 概论 原理 配置 HAL库代码 1. 初始化函数 2. 数据发送和接收函数 3. 中断和DMA函数 4. 中断服务函数 串口通信 概论 我们知道,通信桥接了两个设备之间的交流。一个经典的例子就是使用串口通信交换上位机和单片机之间的数据。 比较常见的串…...
差分轮算法-两个轮子计算速度的方法-阿克曼四轮小车计算方法
四轮驱小车的话: 转向角度计算方法:float turning_angle z_angular / x_linear; // 转向角度,单位为弧度 速度的话直接用线速度 两轮驱动小车: 计算公式: leftSpeed x_linear - z_angular * ORIGINBOT_WHEEL_TRACK /…...
解释器模式
在软件开发的诸多场景中,我们有时需要处理特定领域的语言或表达式。例如,在数据库查询中,我们使用 SQL 语句来查询数据;在数学计算软件里,需要解析和计算各种数学表达式。解释器模式(Interpreter Pattern&a…...
代码随想录刷题day14(2)|(链表篇)02.07. 链表相交(疑点)
目录 一、链表理论基础 二、链表相交求解思路 三、相关算法题目 四、疑点 一、链表理论基础 代码随想录 二、链表相交求解思路 链表相交时,是结点的位置,也就是指针相同,不是结点的数值相同; 思路:定义两个指针…...
戴尔电脑用u盘重装系统_戴尔电脑用u盘重装win10系统教程
戴尔电脑用u盘重装系统?戴尔电脑这几年默认预装win10家庭版和win11家庭版。有的用户用上了预装win11家庭版的戴尔电脑,使用一段时间依然不习惯,于是想退回win10。但不知道怎么重装win10,这几年的戴尔电脑建议采用U盘方式安装系统比…...
http的请求体各项解析
一、前言 做Java开发的人员都知道,其实我们很多时候不单单在写Java程序。做的各种各样的系统,不管是PC的 还是移动端的,还是为别的系统提供接口。其实都离不开http协议或者https 这些东西。Java作为编程语言,再做业务开发时&#…...
【MARK】Cline配合FreeAPI,再薅亿点点token
说明 自从用了cline,token消耗的速度就开始起飞。各家免费的几百万Token,看起来挺多,实际用起来还是顶不住几天~ FreeAPI是个简单的替代,上下文长度还是不如官方API,所以还是推荐使用官方,这个只是玩具&a…...
如何使用CRM数据分析优化销售和客户关系?
嘿,大家好!你有没有想过为什么有些公司在市场上如鱼得水,而另一些却在苦苦挣扎?答案可能就藏在他们的销售策略和客户关系管理(CRM)系统里。今天我们要聊的就是如何通过有效的 CRM 数据分析来提升你的销售额…...
c语言数组详解
前言 一、数组的定义: 二、数组的初始化: 1.如何给数组赋初值: 1.1逐个赋值: 1.2使用花括号初始化: 1.3使用等号赋值: 2.不同的初始化方式 2.1使用循环初始化: 2.2使用默认初始化: 三…...
EasyNVR免费版已发布!EasyNVR接入海康NVR大华NVR宇视NVR天地伟业NVR接入各种IPC摄像机工业监控家庭监控
EasyNVR不用多说了,驰名已久!之前一直是收费的,不管多少个摄像机接入都是收费的,这就导致,很多个人用户,或者说是家庭用户,家里就那么两三个摄像机,想通过EasyNVR接入NAS系统&#x…...
GSI快速收录服务:让你的网站内容“上架”谷歌
辛苦制作的内容无法被谷歌抓取和展示,导致访客无法找到你的网站,这是会让人丧失信心的事情。GSI快速收录服务就是为了解决这种问题而存在的。无论是新上线的页面,还是长期未被收录的内容,通过我们的技术支持,都能迅速被…...
vue2的$el.querySelector在vue3中怎么写
这个也属于直接操作 dom 了,不建议在项目中这样操作,不过我是在vue2升级vue3的时候遇到的,是以前同事写的代码,也没办法 先来看一下对比 在vue2中获取实例是直接通过 this.$refs.xxx 获取绑定属性 refxxx 的实例,并且…...
C++ list 容器用法
C list 容器用法 C 标准库提供了丰富的功能,其中 <list> 是一个非常重要的容器类,用于存储元素集合,支持双向迭代器。<list> 是 C 标准模板库(STL)中的一个序列容器,它允许在容器的任意位置快速…...
双目立体校正和Q矩阵
立体校正 对两个摄像机的图像平面重投影,使二者位于同一平面,而且左右图像的行对准。 Bouguet 该算法需要用到双目标定后外参(R,T) 从上图中可以看出,该算法主要分为两步: 使成像平面共面 这个办法很直观ÿ…...