HarmonyOS(65) ArkUI FrameNode详解

Node

  • 1、Node简介
  • 2、FrameNode
    • 2.1、创建和删除节点
    • 2.2、对FrameNode的增删改
    • 2.3、 FramNode的查询功能
  • 3、demo源码
  • 4、总结
  • 5、参考资料

1、Node简介

在HarmonyOS(63) ArkUI 自定义占位组件NodeContainer介绍了自定义节点复用的原理(阅读本本篇博文之前,建议先读读这个),在NodeController里有有个makeNode方法:


class MyNodeController extends NodeController {private buttonNode: BuilderNode<[Params]> | null = null;//绑定buttonBuilderprivate wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);//当实例绑定的NodeContainer创建的时候进行回调。回调方法将返回一个节点,将该节点挂载至NodeContainer。//或者可以通过NodeController的rebuild()方法进行回调的触发。makeNode(uiContext: UIContext): FrameNode {if (this.buttonNode == null) {//关于BuilderNode下文有所说明this.buttonNode = new BuilderNode(uiContext);this.buttonNode.build(this.wrapBuilder, { text: "This is a Button" })}//返回FrameNode对象,返回的节点将被挂载至NodeContainer的占位节点上。若返回null对象,将清空对应NodeContainer的子节点。return this.buttonNode!.getFrameNode()!;}
}

在make方法里有两个核心概念:FrameNode、BuilderNode,今天这篇博文就来学习FrameNode。
在这里插入图片描述
自定义节点的挂载和显示需要依赖自定义占位节点。现有的自定义节点包括FrameNode、RenderNode、BuilderNode三类对象。FrameNode表示了单个的自定义组件节点(可以对比Android的View),RenderNode表示更加轻量级的渲染节点,BuilderNode对象提供了能够创建、更新原生组件以及组件树的能力。

2、FrameNode

FrameNode表示组件树的实体节点,配合自定义占位容器组件NodeContainer等,在占位容器内挂载一棵自定义的节点树,并对这个节点树中的节点进行动态的增加、修改、删除等操作。基础的FrameNode可以设置通用属性、设置事件回调,并提供完整的自定义能力,包括自定义测量、布局以及绘,具体可以分为两大类能力:完全自定义节点的能力以及原生组件节点代理的能力,可以类比AndroidView/ViewGroup来理解FrameNode,可以通过FrameNode](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-user-defined-arktsnode-framenode-V5)实现类似Android自定义View的功能,。

  • 完全自定义节点:提供完整的自定义能力,包括自定义测量、布局以及绘制,支持节点的动态增、删,设置通用属性,设置事件回调。适用于不自带渲染引擎,需要依赖系统的布局、事件、动画、渲染等能力的场景。

  • 原生组件代理节点:提供原生组件的代理能力,提供遍历节点树的能力,通过组件树上的FrameNode可以遍历整个组件树,并通过节点访问组件的信息或者注册额外的事件监听回调,代理节点可以用于需要遍历整个UI的树形结构,并支持获取原生组件节点的具体信息或者额外注册组件的事件监听回调。适用于结合无感监听的接口实现打点、广告SDK、中台DFX等业务。

2.1、创建和删除节点

FrameNode提供了节点创建和删除的能力。可以通过FrameNode的构造函数创建自定义FrameNode节点,通过构造函数创建的节点对应一个实体的节点。同时,可以通过FrameNode中的dispose接口来实现与实体节点的绑定关系的解除。
示例片段如下,全部代码传送门,文章后面也会有全部代码:

public buttonNode: BuilderNode<[Params]> | null = null;public frameNode: FrameNode | null = null;public rootNode: FrameNode | null = null;
makeNode(uiContext: UIContext): FrameNode | null {this.uiContext = uiContext;if (this.rootNode == null) {this.rootNode = new FrameNode(uiContext);this.rootNode.commonAttribute.width("50%")//占屏幕宽度的一半.height(100).borderWidth(1).backgroundColor(Color.Gray)}if (this.frameNode == null) {//粉色矩形this.frameNode = new FrameNode(uiContext);this.frameNode.commonAttribute.width("100%").height(50)//高度是rootNode的一半.borderWidth(1).position({ x: 200, y: 0 })//位置信息.backgroundColor(Color.Pink);this.rootNode.appendChild(this.frameNode);}//生成两个button,一个是橘黄色的button,一个是粉色的buttonif (this.buttonNode == null) {this.buttonNode = new BuilderNode<[Params]>(uiContext);this.buttonNode.build(this.wrapBuilder, { text: "This is a Button" })this.rootNode.appendChild(this.buttonNode.getFrameNode())}return this.rootNode;}

上面代码告诉我们可以通过两种方式获取FrameNode:
1、直接new FrameNode创建一个FrameNode。
2、通过BuilderNode对象的getFrameNode方法获取FrameNode

上面代码创建了三个FrameNode:rootNode、frameNode、buttonNode最终运行效果如下:
在这里插入图片描述
我们可以通过如下方法对rootNode、frameNode、buttonNode进行正删改查功能

2.2、对FrameNode的增删改

为了测试FrameNode的增删改,定义了如下方法:

//该方法在MyNodeController类中
operationFrameNodeWithFrameNode(frameNode: FrameNode | undefined | null) {if (frameNode) {console.log(TEST_TAG + " get ArkTSNode success.")//调用isModifiable方法判断是否FrameNode可以修改console.log(TEST_TAG + " check rootNode whether is modifiable " + frameNode.isModifiable());}if (this.uiContext) {//创建黑色方块的FrameNodelet frameNode1 = new FrameNode(this.uiContext);//创建橘色方块的FrameNodelet frameNode2 = new FrameNode(this.uiContext);//设置位置信息frameNode1.commonAttribute.size({ width: 50, height: 50 }).backgroundColor(Color.Black).position({ x: 50, y: 60 })frameNode2.commonAttribute.size({ width: 50, height: 50 }).backgroundColor(Color.Orange).position({ x: 120, y: 60 })try {//插入节点frameNode?.appendChild(frameNode1)

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

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

相关文章

详解RabbitMQ在Ubuntu上的安装

​​​​​​​ 目录 Ubuntu 环境安装 安装Erlang 查看Erlang版本 退出命令 ​编辑安装RabbitMQ 确认安装结果 安装RabbitMQ管理界面 启动服务 查看服务状态 通过IP:port访问 添加管理员用户 给用户添加权限 再次访问 Ubuntu 环境安装 安装Erlang RabbitMq需要…

vue图片之放大、缩小、1:1、刷新、左切换、全屏、右切换、左旋咋、右旋转、x轴翻转、y轴翻转

先上效果&#xff0c;代码在下面 <template><!-- 图片列表 --><div class"image-list"><img:src"imageSrc"v-for"(imageSrc, index) in images":key"index"click"openImage(index)"error"handleI…

【计算机网络】实验12:网际控制报文协议ICMP的应用

实验12 网际控制报文协议ICMP的应用 一、实验目的 验证ping命令和tracert命令的工作原理。 二、实验环境 Cisco Packet Tracer模拟器 三、实验过程 1.构建网络拓扑并进行信息标注&#xff0c;将所需要配置的IP地址写在对应的主机或者路由器旁边&#xff0c;如图1所示。 图…

迭代器模式的理解和实践

引言 在软件开发中&#xff0c;我们经常需要遍历容器对象&#xff08;如数组、列表、集合等&#xff09;中的元素。如果每个容器对象都实现自己的遍历算法&#xff0c;那么代码将会变得冗余且难以维护。为了解决这个问题&#xff0c;迭代器模式应运而生。迭代器模式是一种行为型…

TS2339: Property ‘value‘ does not exist on type ‘MessageBoxData‘.

1、源代码 <template><el-dialog:visible"visible":before-close"handleClose":close-on-click-modal"false"title"邀请码"width"1200px"append-to-bodydestroy-on-close><div class"invite-code-wrap…

Windows 安装配置 RabbitMQ 详解

博主介绍&#xff1a; 计算机科班人&#xff0c;全栈工程师&#xff0c;掌握C、C#、Java、Python、Android等主流编程语言&#xff0c;同时也熟练掌握mysql、oracle、sqlserver等主流数据库&#xff0c;能够为大家提供全方位的技术支持和交流。 工作五年&#xff0c;具有丰富的…

R语言的数据结构--矩阵

【图书推荐】《R语言医学数据分析实践》-CSDN博客 《R语言医学数据分析实践 李丹 宋立桓 蔡伟祺 清华大学出版社9787302673484》【摘要 书评 试读】- 京东图书 (jd.com) R语言医学数据分析实践-R语言的数据结构-CSDN博客 矩阵是一个二维数组&#xff0c;矩阵中的元素都具有相…

微信小程序一键复制功能

wx.setClipboardData(Object object) 设置系统剪贴板的内容。调用成功后&#xff0c;会弹出 toast 提示"内容已复制"&#xff0c;持续 1.5s wx.setClipboardData({data: 你需要复制的内容,success (res) {wx.getClipboardData({success (res) {console.log(res.dat…

【Python网络爬虫 常见问题汇总】

目录 1. 爬取图片出现403解决办法&#xff1a;设置请求头中的Referer字段 2.关于干坏事的问题后续不定期更新 欢迎共同探讨学习进步 1. 爬取图片出现403 问题出自案例9&#xff0c;已解决。 【Python网络爬虫笔记】9- 抓取优美图库高清壁纸 当在爬取图库图片时遇到 403 错误…

分布式 分布式事务 总结

前言 相关系列 《分布式 & 目录》《分布式 & 分布式事务 & 总结》《分布式 & 分布式事务 & 问题》 分布式事务 所谓分布式事务是指操作范围笼罩多个不同节点的事务。例如对于订单节点&库存节点而言&#xff0c;一次完整的交易需要同时调动两个节…

STM32+模拟或硬件IIC+SHT20驱动问题:接上拉电阻、BUSY死锁?

主要问题&#xff1a; 1&#xff0c;使用STM32F103C8T6&#xff0c;模拟IIC&#xff0c;SCL和SDA口配置为推挽输出上拉&#xff0c;主要是SDA脚&#xff0c;每次都要输出输入模式重新配置&#xff0c;虽然也能通信&#xff0c;但不稳定&#xff0c;出错率大&#xff1b; 2&…

【工业机器视觉】基于深度学习的水表盘读数识别(3-数据标注与转换)

【工业机器视觉】基于深度学习的仪表盘识读&#xff08;2&#xff09;-CSDN博客 数据标注 标注扩展 Labelme 和 LabelImg 都是用于创建机器学习和计算机视觉项目所需标注数据的工具。它们都允许用户通过图形界面手动标注图像&#xff0c;但各自有其特点和适用场景。 Labelme…

静态路由与交换机配置实验

1.建立网络拓扑 添加2台计算机&#xff0c;标签名为PC0、PC1&#xff1b;添加2台二层交换机2960&#xff0c;标签名为S0、S1&#xff1b;添加2台路由器2811&#xff0c;标签名为R0、R1&#xff1b;交换机划分的VLAN及端口根据如下拓扑图&#xff0c;使用直通线、DCE串口线连接…

【Spark】Spark Join类型及Join实现方式

Spark Join类型 1. Inner Join (内连接) 示例&#xff1a;val result df1.join(df2, df1("id") df2("id"), "inner")执行逻辑&#xff1a;只返回那些在两个表中都有匹配的行。 2. Left Join (左外连接) 示例&#xff1a;val result df1.jo…

php:完整部署Grid++Report到php项目,并实现模板打印

一、下载Grid++Report软件 路径:开发者安装包下载 - 锐浪报表工具 二、 安装软件 1、对下载的压缩包运行内部的exe文件 2、选择语言 3、 完成安装引导 下一步即可 4、接收许可协议 点击“我接受” 5、选择安装路径 “浏览”选择安装路径,点击"安装" 6、完成…

web安全攻防入门教程

Web安全攻防入门教程 Web安全攻防是指在Web应用程序的开发、部署和运行过程中&#xff0c;保护Web应用免受攻击和恶意行为的技术与策略。这个领域不仅涉及防御措施的实现&#xff0c;还包括通过渗透测试、漏洞挖掘和模拟攻击来识别潜在的安全问题。 本教程将带你入门Web安全攻…

前端node环境安装:nvm安装详细教程(安装nvm、node、npm、cnpm、yarn及环境变量配置)

需求&#xff1a;在做前端开发的时候&#xff0c;有的时候 这个项目需要 node 14 那个项目需要 node 16&#xff0c;我们也不能卸载 安装 。这岂不是很麻烦。这个时候 就需要 一个工具 来管理我们的 node 版本和 npm 版本。 下面就分享一个 nvm 工具 用来管理 node 版本。 这个…

Unity在运行状态下,当物体Mesh网格发生变化时,如何让MeshCollider碰撞体也随之实时同步变化?

旧版源代码地址&#xff1a;https://download.csdn.net/download/qq_41603955/90087225?spm1001.2014.3001.5501 旧版效果展示&#xff1a; 新版加上MeshCollider后的效果&#xff1a; 注意&#xff1a;在Unity中&#xff0c;当你动态地更改物体的Mesh时&#xff0c;通常期望…

AR眼镜_消费级工业AR智能眼镜主板硬件解决方案

AR眼镜的研发是一项复杂的软硬件集成工程&#xff0c;它需要在摄影、音频、交互和连接等多个方面提供卓越的基础体验&#xff0c;因此产品的每个细节都显得尤为重要。 在设计AR眼镜时&#xff0c;重量、体积和散热性能都是必须认真考量的关键因素。在芯片平台的选择上&#xff…

【OpenCV】Canny边缘检测

理论 Canny 边缘检测是一种流行的边缘检测算法。它是由 John F. Canny 在 1986 年提出。 这是一个多阶段算法&#xff0c;我们将介绍算法的每一个步骤。 降噪 由于边缘检测易受图像中的噪声影响&#xff0c;因此第一步是使用 5x5 高斯滤波器去除图像中的噪声。我们在前面的章…