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接口。

该类有两个作用:

  1. 通过类中的getView(): WrappedBuilder<[Params]>{}方法把上面创建的鸿蒙组件加载到这个PlatformView上
  2. 实现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

新建一个继承于FlutterPluginCustomPlugin插件,在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命令进行编译, 配置相关证书, 运行。

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

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

相关文章

逆波兰表达式求值(力扣150)

这道题也是一道经典的栈应用题。为什么这样说呢&#xff1f;我们可以发现&#xff0c;当我们遍历到运算符号的时候&#xff0c;我们就需要操控这个运算符之前的两个相邻的数。这里相邻数不仅仅指最初数组里相邻的数&#xff0c;在进行了运算之后&#xff0c;得到的结果与后面的…

ElasticSearch DSL查询之排序和分页

一、排序功能 1. 默认排序 在 Elasticsearch 中&#xff0c;默认情况下&#xff0c;查询结果是根据 相关度 评分&#xff08;score&#xff09;进行排序的。我们之前已经了解过&#xff0c;相关度评分是通过 Elasticsearch 根据查询条件与文档内容的匹配程度自动计算得出的。…

《汽车维修技师》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答&#xff1a; 问&#xff1a;《汽车维修技师》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《汽车维修技师》级别&#xff1f; 答&#xff1a;省级。主管单位&#xff1a;北方联合出版传媒&#xff08;…

产品经理面试题总结2025【其一】

一、产品理解与定位 1、你如何理解产品经理这个角色&#xff1f; 作为一名互联网产品经理&#xff0c;我理解这个角色的核心在于成为产品愿景的制定者和执行的推动者。具体来说&#xff0c;产品经理是连接市场、用户和技术团队之间的桥梁&#xff0c;负责理解市场需求、用户痛…

数学基础 --线性代数之理解矩阵乘法

理解矩阵乘法的解析 矩阵乘法&#xff08;Matrix Multiplication&#xff09;是线性代数中的核心操作之一。在数学、几何和工程实际中&#xff0c;它不仅是一种代数运算规则&#xff0c;还承载着丰富的几何和映射意义。本文将从多个角度深入解析矩阵乘法&#xff0c;帮助读者理…

C#高级:用Csharp操作鼠标和键盘

一、winform 1.实时获取鼠标位置 public Form1() {InitializeComponent();InitialTime(); }private void InitialTime() {// 初始化 Timer 控件var timer new System.Windows.Forms.Timer();timer.Interval 100; // 设置为 100 毫秒&#xff0c;即每 0.1 秒更新一次timer.…

【中国电信-安全大脑产品介绍】

座右铭&#xff1a;人生的道路上无论如何选择总会有遗憾的&#xff01; 文章目录 前言一、安全大脑介绍二、中国电信-安全大脑产品分类1.防护版2.审计版 三、安全大脑-部署方案总结 前言 安全占据我们日常生活中首要地位&#xff0c;它时时刻刻提醒着我们出入平安。当然网络安…

数据库:MongoDB命令行帮助解释

MongoDB命令&#xff1a; mongodmongosmongoperrormongoexportmongofilesmongoimportmongorestoreMongostat MongoDB包中的核心组件包括: mongod 是 MongoDB 的核心服务器进程&#xff0c;负责数据存储和管理。mongos 是分片集群的路由进程&#xff0c;负责将请求路由到正确…

洛谷P8837

[传智杯 #3 决赛] 商店 - 洛谷 代码区&#xff1a; #include<stdio.h> #include<stdlib.h> int cmp(const void*a,const void *b){return *(int*)b-*(int*)a; } int main(){int n,m;scanf("%d%d",&n,&m);int w[n];int c[m];for(int i0;i<n;…

多线程杂谈:惊群现象、CAS、安全的单例

引言 本文是一篇杂谈&#xff0c;帮助大家了解多线程可能会出现的面试题。 目录 引言 惊群现象 结合条件变量 CAS原子操作&#xff08;cmp & swap&#xff09; 线程控制&#xff1a;两个线程交替打印奇偶数 智能指针线程安全 单例模式线程安全 最简单的单例&…

三分钟简单了解HTML的一些语句

1.图片建议建立一个文件夹如下图所示 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"keywords"><title>魔神羽落</title><style>.testone{background-color: #ff53e…

HCIP笔记4--OSPF域内路由计算

1. 域内LSA 1.1 一类LSA 一类LSA: 路由器直连状态&#xff0c;Router LSA。 串口需要两端配置好IP,才会产生一类LSA; 以太网口只需要一端配置了IP就会直接产生一类LSA。 LSA通用头部 Type: Router 直连路由LS id: 12.1.1.1 路由器router idAdv rtr: 12.1.1.1 通告的路由器&…

k8s基础(7)—Kubernetes-Secret

Secret概述&#xff1a; Secret 是一种包含少量敏感信息例如密码、令牌或密钥的对象。 这样的信息可能会被放在 Pod 规约中或者镜像中。 使用 Secret 意味着你不需要在应用程序代码中包含机密数据。 由于创建 Secret 可以独立于使用它们的 Pod&#xff0c; 因此在创建、查看和…

【leetcode100】验证二叉搜索树

1、题目描述 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 示例 1&…

谈谈MySQL中的索引和事务

目录 1. 索引 1.1 索引介绍 1.2 缺陷 1.3 使用 1.3.1 查看索引 1.3.2 创建索引 1.3.3 删除索引 2. 索引底层的数据结构 2.1 B树 3. 事务 3.1 为什么使用事务 3.2 事务的使用 3.3 事务的基本特性 1. 索引 1.1 索引介绍 索引相当于一本书的目录(index), 在一…

2024:CSDN上的收获与蜕变——我的技术成长之旅

2024&#xff1a;CSDN上的收获与蜕变——我的技术成长之旅 前言数据见证&#xff1a;2024年的创作足迹荣誉殿堂&#xff1a;各平台的创作证书与认可社区共建&#xff1a;行业贡献与互动交流展望未来&#xff1a;2025年的目标与计划结语 前言 博主简介&#xff1a;江湖有缘 在技…

博客之星2024年度-技术总结:技术探险家小板的一年的征程

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 技术探险家的新一年征程 2.0 数据库管理与优化&#xff1a;MySQL 的魔法森林 2.1 穿越基础概念的迷雾 2.2 实践应用&#xff1a;成为森林的主人 2.3 性能调优&…

【vim】vim怎样直接跳转到某行?

vim怎样直接跳转到某行&#xff1f; 一、使用行号跳转二、使用相对行号跳转三、使用标记跳转 在Vim中直接跳转到某行可以使用以下几种方法&#xff1a; 一、使用行号跳转 在命令模式下&#xff0c;输入冒号:&#xff0c;然后输入你想要跳转的行号&#xff0c;最后按回车键。例…

SentencePiece和 WordPiece tokenization 的含义和区别

SentencePiece和 WordPiece tokenization 的含义和区别 SentencePiece 和 WordPiece 都是常用的分词(tokenization)技术,主要用于自然语言处理(NLP)中的文本预处理,尤其是在处理大规模文本数据时。它们都基于子词(subword)单元,能够将未登录词(out-of-vocabulary, O…

视频m3u8形式播放 -- python and html

hls hls官网地址 创建项目 ts为视频片段 m3u8文件内容 html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" …