鸿蒙ArkUI：【从代码到UI显示的整体渲染流程】

最新推荐文章于 2024-06-18 15:33:58 发布
最新推荐文章于 2024-06-18 15:33:58 发布
阅读量887 收藏 30
点赞数 28
分类专栏： 鸿蒙开发 文章标签： harmonyos openharmony 鸿蒙开发 鸿蒙系统 鸿蒙 程序员 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62167422/article/details/138767838
版权

ArkUI

方舟开发框架（简称ArkUI）是鸿蒙开发的UI框架，提供如下两种开发范式，我们 只学声明式开发范式

  1. [基于ArkTS的声明式开发范式]
  2. [兼容JS的类Web开发范式]
  3. 开发前请熟悉鸿蒙开发指导文档：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

整体架构图

image.png

我们使用ArkTS写完页面描述后，交给语言运行时进行语法解析，再之后由C++编写的后端引擎将UI转换为渲染指令交给渲染引擎绘制到屏幕上

ArkUI语法初见

image.png

  1. ArkTS对TypeScript语言进行扩展，提供值类型结构struct。
  2. struct定义自定义组件，必须搭配Component或者CustomDialog使用
  3. ArkUI中组件定义和状态管理都是通过装饰器来做的。TS中的装饰器主要有类装饰器、属性装饰器、方法装饰器以及参数装饰器四种
  4. 事件方法和属性方法只是方法的入参不一样，一个是基本值或者表达式值，一个是函数。
  5. 在TS中函数我们就把函数当成变量来用就行，只不过普通变量是存储一个类型的值，而函数用来存储一个输入到输出的转变过程
  6. 还记得我们上面说的描述UI嘛，在这里就在build函数中描述。框架会自动调用build，不需要我们手动调用

从代码到UI显示的整体渲染流程

image.png

ArkUI的渲染分为两大情况

从创建到显示(①~⑤)

① 通过devEco将源码编译成带类型标识的字节码文件，同时携带创建这个结构所需信息的指令流

② 通过跨语言调用生成C++层的Component树。这一步只是把ArkTS描述转变成了使用C++描述

③ 通过Component树生成Element树，Element是Component的实例，用于表示一个具体的组件节点。界面在运行时的树形结构就是通过Element树来维持的，同时自动更新的diff算法也是依赖Element树来减少复杂度的

④ 对于每个可显示的Element都会为其创建对应的RenderNode。RenderNode负责一个节点的显示信息，它形成的Render树维护着整个界面渲染需要用到的信息，包括位置、大小、绘制命令等。后续的布局、绘制都是在Render树上进行的

⑤ 实现真正的渲染并显示绘制结果。HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿

搜狗高速浏览器截图20240326151547.png

按钮点击到更新显示(⑥~⑪)

⑥ 点击事件传递到组件，组件的onClick事件方法被触发执行

⑦ 由于onClick事件方法中@State注解过的变量改变了，相应getter/setter函数会被触发

⑧ 状态管理模块定位出关联的UI组件

⑨ 状态管理模块更新相应的Element树的信息

⑩ 更新相应的UI组件的渲染信息

⑪ 界面显示，与⑤类似

盒子模型

image.png

上面我们说的布局原理，子视图上报给父视图自身大小的值是指 组件内容区的大小

鸿蒙开发岗位需要掌握那些核心要领？

目前还有很多小伙伴不知道要学习哪些鸿蒙技术？不知道重点掌握哪些？为了避免学习时频繁踩坑，最终浪费大量时间的。

自己学习时必须要有一份实用的鸿蒙（Harmony NEXT）资料非常有必要。 这里我推荐，根据鸿蒙开发官网梳理与华为内部人员的分享总结出的开发文档。内容包含了：【ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

废话就不多说了，接下来好好看下这份资料。

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。鸿蒙OpenHarmony知识←前往。下面是鸿蒙开发的学习路线图。

针对鸿蒙成长路线打造的鸿蒙学习文档。鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，帮助大家在技术的道路上更进一步。

其中内容包含：

《鸿蒙开发基础》鸿蒙OpenHarmony知识←前往

  1. ArkTS语言
  2. 安装DevEco Studio
  3. 运用你的第一个ArkTS应用
  4. ArkUI声明式UI开发
  5. .……

《鸿蒙开发进阶》鸿蒙OpenHarmony知识←前往

  1. Stage模型入门
  2. 网络管理
  3. 数据管理
  4. 电话服务
  5. 分布式应用开发
  6. 通知与窗口管理
  7. 多媒体技术
  8. 安全技能
  9. 任务管理
  10. WebGL
  11. 国际化开发
  12. 应用测试
  13. DFX面向未来设计
  14. 鸿蒙系统移植和裁剪定制
  15. ……

《鸿蒙开发实战》鸿蒙OpenHarmony知识←前往

  1. ArkTS实践
  2. UIAbility应用
  3. 网络案例
  4. ……

最后

鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！

移不动开发技术
关注
  • 28
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ArkUI框架之声明式 UI 条件渲染&声明周期以及案例美化实战运用
一键难忘的博客
09-27 1511
到这里一个简单基于OpenHarmony/HarmonyOS操作系统的ArkUI框架的小入门Demo操作就结束了，这个是声明式UI开发，还有一种是类Web范式开发，至于他们俩种开发方式的区别在本栏目的第一篇文章中有详细的优缺点分析。4.到主index.ets里引用label，规定label值的不同，以改变渲染的文字不同的目的。5.设置用户名和密码框的属性。8.规定文字和输入框的占比大小，设置为，文字占比为百分之20，输入框占比为百分之80。我们先写一个简单的正则表达式，来过滤到不合法的字符。
HarmonyOS从基础到实战-高性能华为在线答题元服务
热门推荐
一键难忘的博客
11-21 11万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
基于ArkUI框架开发-ImageKnife渲染层重构
1
03-25 1252
综上可知，此次重构渲染层，一共新增了6个基础能力，适配了IDE最新版特性自定义组件可链式调用通用属性和方法，并且采用适合的设计模式保留了自定义组件绘制部分的拓展能力。展示了部分常用场景下使用代码的方式，帮助开发者更快上手开发。最后在OpenHarmony不断推陈出新之际，三方库ImageKnife也应该激流勇进，不断地提升组件的实用性和适用性，为开发者创造一个良好的开发体验。
HarmonyOS NEXT应用开发之手写绘制及保存图片
1
03-20 971
本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能，并通过image库的packToFile和packing接口将手写板的绘制内容保存为图片。
鸿蒙ArkUI声明式学习：【UI资源管理】
m0_70748845的博客
04-08 1259
OpenHarmony 应用的资源分类和资源的访问以及应用开发使用的像素单位以及各单位之间相互转换的方法。
鸿蒙ArkUI即将取代Java UI？
张晨光老师的播客
01-22 6348
关注前端开发的同学，一定听过近些年，DSL 描述式的 UI 构建写法，大有取代传统命令式布局的趋势。 传统上，写一套 UI 代码，需要根据数据的逻辑，手动的在业务代码里，去改变界面 UI 元素的状态，造成业务代码和 UI 代码搅在一起，黑话=“耦合性极高”。结果就是，把人人都炼成了一身诸哥的本事，事必躬亲，鞠躬尽瘁… 好的。话说在网页开发的远古时代（2013 年以前），想写一个炫酷的网页，往往需要直接操作 HTML 元素，比如控制网页上一个价格数字根据选择不同优惠券的变化，需要直接操作这个价格文字元素。 类
鸿蒙ArkUI开发学习：【渲染控制语法】
m0_70748845的博客
04-09 1251
ArkUI开发框架是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架，它支持程序使用if/else条件渲染，ForEach循环渲染以及懒加载渲染。本节笔者介绍一下这三种渲染方式的使用。
HarmonyOS4.0——ArkUI应用说明
m0_71524094的博客
04-26 799
ArkUI开发框架是方舟开发框架的简称，它是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架，它使用极简的UI信息语法、丰富的UI组件以及实时界面语言工具，帮助开发者提升应用界面开发效率 30%，开发者只需要使用一套 TS / JS API，就能在多个 HarmonyOS / OpenHarmony 设备上提供既丰富又流畅的用户界面体验。如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
鸿蒙ArkUI-X 跨平台通信：从入土到复活
m0_56255097的博客
04-30 631
这里只对 Android 侧进行了实现，iOS 侧因为没有实体机的原因，先放一放，原理都一样，代码也差不多。官方在 Android 侧提供了一个抽象类，我们需要继承它实现一些方法来进行通信。在 ArkUI-X 侧同样提供了包来进行通信。
WanAndroid鸿蒙ArkUI简易版，UI仔练手.zip
02-07
华为 鸿蒙系统 开发
鸿蒙ArkUI跨平台应用开发
01-11
ArkUI 是 HarmonyOS 的 UI 开发框架，旨在实现跨平台、跨设备的无缝体验。 ArkUI 的架构设计考虑了跨平台，代码架构解耦，方便移植到不同平台。 ArkUI 采用声明式编程模型，提高开发者工作效率，确保在不同设备上的...
Unity-UI-Polygon:新的Unity UI的多边形渲染器
05-06
Unity-UI-多边形新的Unity UI的多边形渲染器这是用于在UI系统中绘制多边形的图形控件。 [UI>扩展程序>基元> UI多边形] 我写了这个脚本，作为由Simon“ ddreaper” Jackson（ ）维护的新Unity UI系统扩展项目的补充，...
ArkUI SwiftUI 对比分析
12-27
本文将通过对比分析来介绍 ArkUI 和 SwiftUI 的异同点，以帮助 iOS SwiftUI 开发者快速过渡到 ArkUI 开发。 声明式 UI ArkUI 和 SwiftUI 都是声明式 UI 框架，它们描述了 UI 的外观和工作方式。声明式 UI 的核心...
harmonyos源代码-HarmonyOS:鸿蒙操作系统
07-01
HarmonyOS整体遵从分层设计，从下向上依次为：内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 功能/模块”逐级展开，在多设备部署场景下，支持根据实际需求裁剪某些非必要的子系统或功能/模块 ...
【HarmonyOS NEXT】鸿蒙App开发抓包指导-以Charles工具为例
wu1004019946的博客
06-12 598
三、 PC端Charles导出证书，点击 Help--->SSL Proxying--->Install Charles Root Certificate on a Mobile Device or Remote Browser。点击 Help--->SSL Proxying--->Install Charles Root Certificate--->安装证书--->选择证书存储路径为：受信任的根证书颁发机构。1) 通过手机浏览器下载charles提供的网址下载证书，在浏览器下载之后要另存到下载目录。
HarmonyOS角落里的知识：一杯冰美式的时间 -- DragView
m0_64422261的博客
06-18 644
在学习API9的时候就写了一个DragView,用于展示某个页面的悬浮可拖动的入口，特意丰富了许多的功能，今天分享给大家～。Demo基于API11。
HarmonyOS角落里的知识：一杯冰美式的时间 -- 之打字机
最新发布
m0_64422261的博客
06-18 730
模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果，往往能够吸引人们的眼球，让用户的注意力聚焦在输入的内容上，本文将和大家探讨打字机效果的实现方式以及应用。Demo基于API12。
'Ui::Dialog* Dialog::ui' is private Ui::Dialog *ui; 怎么解决
05-28
这个问题是因为 `Ui::Dialog *ui` 是在 `Dialog` 类的私有成员中声明的，无法在类外部直接访问。可以通过在 `Dialog` 类中添加公有成员函数来访问它。例如，可以添加一个公有成员函数 `Ui::Dialog* getUi()`，在该函数中返回 `ui` 指针。 示例代码如下： ```c++ class Dialog { public: Ui::Dialog* getUi() { return ui; } private: Ui::Dialog *ui; }; ``` 然后，可以在类外部通过调用 `getUi()` 函数来访问 `ui` 指针。 注意：如果 `Dialog` 类是从 Qt 的 `QDialog` 类继承而来，那么 `ui` 指针可能已经在 `QDialog` 中声明为了保护成员，因此可以直接在 `Dialog` 类中访问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值