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.rhkb.cn/news/487782.html

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

相关文章

2024.12.5——攻防世界Training-WWW-Robots攻防世界baby_web

2024.12.5—攻防世界Training-WWW-Robots 知识点&#xff1a;robots协议 dirsearch工具 本题与第一道Robots协议十分类似&#xff0c;不做wp解析 大致步骤&#xff1a; step 1 打开靶机&#xff0c;发现是robots协议相关 step 2 用dirsearch进行扫描目录 step 3 url传参r…

vue使用百度富文本编辑器

1、安装 npm add vue-ueditor-wrap 或者 pnpm add vue-ueditor-wrap 进行安装 2、下载UEditor 官网&#xff1a;ueditor:rich text 富文本编辑器 - GitCode 整理好的&#xff1a;vue-ueditor: 百度编辑器JSP版 因为官方的我没用来&#xff0c;所以我自己找的另外的包…

Flask使用长连接(Connection会失效)、http的keep-alive、webSocket。---GPU的CUDA会内存不足报错

Flask Curl命令返回状态Connection: close转keep-alive的方法 使用waitress-serve启动 waitress-serve --listen0.0.0.0:6002 manage:app 使用Gunicorn命令启动 gunicorn -t 1000 -w 2 -b 0.0.0.0:6002 --worker-class gevent --limit-request-line 8190 manage:appFlask使用f…

Prim 算法在不同权重范围内的性能分析及其实现

Prim 算法在不同权重范围内的性能分析及其实现 1. 边权重取值在 1 到 |V| 范围内伪代码C 代码实现2. 边权重取值在 1 到常数 W 之间结论Prim 算法是一种用于求解加权无向图的最小生成树(MST)的经典算法。它通过贪心策略逐步扩展生成树,确保每次选择的边都是当前生成树到未加…

Windows Terminal ssh到linux

1. windows store安装 Windows Terminal 2. 打开json文件配置 {"$help": "https://aka.ms/terminal-documentation","$schema": "https://aka.ms/terminal-profiles-schema","actions": [{"command": {"ac…

Hadoop生态圈框架部署 伪集群版(四)- Zookeeper单机部署

文章目录 前言一、Zookeeper单机部署&#xff08;手动部署&#xff09;1. 下载Zookeeper安装包到Linux2. 解压zookeeper安装包3. 配置zookeeper配置文件4. 配置Zookeeper系统环境变量5. 启动Zookeeper6. 停止Zookeeper在这里插入图片描述 注意 前言 本文将详细介绍Zookeeper的…

MBTI 16人格分析

文章目录 一、MBTI介绍二、十六种MBTI人格1.ESTJ&#xff1a;总经理2.ENTP&#xff1a;辩论家3.INTP&#xff1a;逻辑学家4.ISFJ&#xff1a;守卫者 三、4组人格分析1.E与I2.S与N3.T与F4.P与J 一、MBTI介绍 MBTI是一种人格类型理论模型。全称是“Myers-Briggs Type Indicator”…

Ubuntu22.04深度学习环境安装【显卡驱动安装】

前言 使用Windows配置环境失败&#xff0c;其中有一个包只有Linux版本&#xff0c;Windows版本的只有python3.10的&#xff0c;所以直接选用Linux来配置环境&#xff0c;显卡安装比较麻烦&#xff0c;单独出一期。 显卡驱动安装 方法一&#xff1a;在线安装&#xff08;操作…

【LeetCode: 463. 岛屿的周长 + bfs】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

【Web】2024“国城杯”网络安全挑战大赛题解

目录 Ez_Gallery 法一&#xff1a;shell盲注 法二&#xff1a;反弹shell 法三&#xff1a;响应钩子回显 Easy Jelly 法一&#xff1a;无回显XXE 法二&#xff1a;Jexl表达式RCE signal 法一&#xff1a;SSRF 法二&#xff1a;filterchain RCE Ez_Gallery 用这个bp验证…

记一次:使用C#创建一个串口工具

前言&#xff1a;公司的上位机打不开串口&#xff0c;发送的时候设备总是关机&#xff0c;因为和这个同事关系比较好&#xff0c;编写这款软件是用C#编写的&#xff0c;于是乎帮着解决了一下&#xff08;是真解决了&#xff09;&#xff0c;然后整理了一下自己的笔记 一、开发…

大数据新视界 -- 大数据大厂之 Hive 数据导入:多源数据集成的策略与实战(上)(3/ 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Windows 安装配置 RabbitMQ 详解

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

14-1.Java 多线程(创建线程的方式、Thread 常用方法、线程安全、线程同步、线程通信、线程池使用、并发与并行、线程的生命周期、乐观锁与悲观锁)

一、线程概述 线程是一个程序内部的一条执行流程 程序中如果只有一条执行流程&#xff0c;那这个程序就是单线程的程序 多线程是指从软硬件上实现的多条执行流程的技术&#xff0c;多条线程由 CPU 负责调度执行 Java 通过 java.lang.Thread 类的对象来代表线程的 二、创建线…

中介者模式的理解和实践

一、中介者模式概述 中介者模式&#xff08;Mediator Pattern&#xff09;&#xff0c;也称为调解者模式或调停者模式&#xff0c;是一种行为设计模式。它的核心思想是通过引入一个中介者对象来封装一系列对象之间的交互&#xff0c;使得这些对象不必直接相互作用&#xff0c;从…

MySQL-DQL之数据多表操作

文章目录 一. 多表操作1. 表与表之间的关系2. 外键约束3. 创建外键约束表(一对多操作) 二. 多表查询1. 多表查询① 交叉连接查询(基本不会使用-得到的是两个表的乘积) [了解]&#xff08;不要记住&#xff09;② 交集运算&#xff1a;内连接查询(join)③ 差集运算&#xff1a;外…

Qt之自定义动态调控是否显示日志

创作灵感 最近在芯驰x9hp上开发仪表应用。由于需要仪表警告音&#xff0c;所以在该平台上折腾并且调试仪表声音的时候&#xff0c;无意间发现使用&#xff1a; export QT_DEBUG_PLUGINS1 可以打印更详细的调试信息。于是想着自己开发的应用也可以这样搞&#xff0c;这样更方便…

Nanolog起步笔记-9-log解压过程(3)寻找meta续

Nanolog起步笔记-9-log解压过程-3-寻找meta续 当前的目标新的改变decompressNextLogStatementmetadata查看业务面的log语句注释掉 runBenchmark();改过之后&#xff0c;2条记录之后&#xff0c;这里就直接返回了 小结 当前的目标 没有办法&#xff0c;还要继续。 当前的目标&a…

最小二乘法拟合出二阶响应面近似模型

背景&#xff1a;根据样本试验数据拟合出二阶响应面近似模型&#xff08;正交二次型&#xff09;&#xff0c;并使用决定系数R和调整的决定系数R_adj来判断二阶响应面模型的拟合精度。 1、样本数据&#xff08;来源&#xff1a;硕士论文《航空发动机用W形金属密封环密封性能分析…

《操作系统 - 清华大学》6 -7:局部页面置换算法:Belady现象

文章目录 1. 定义2. LRU、FIFO和Clock的比较 1. 定义 局部页面置换算法的特点是针对一个正在运行的程序&#xff0c;它访问内存的情况&#xff0c;访问页的情况&#xff0c;来决定应该采取什么样策略&#xff0c;把相应的页替换出去&#xff0c;站在算法本身角度来考虑置换哪个…