0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

全面解读HarmonyOS新一代UI框架

电子发烧友开源社区 来源:HarmonyOS开发者 作者:yuzhiqiang 2021-10-29 10:21 次阅读

作者:yuzhiqiang,UI编程框架首席技术专家

Harmony 3.0.0开发者预览版中,包含了新一代的声明式UI框架ArkUI 3.0、多语言跨平台编译器ArkCompiler 3.0、跨端开发工具DevEco Studio3.0,以及基于TS/JS语言的API 7,全面提升开发者体验。

本期,我们要为大家重点介绍HarmonyOS新一代声明式UI框架ArkUI 3.0。

一、UI编程框架

在介绍ArkUI 3.0之前,我们先来简要了解一下什么是UI编程框架。

UI编程框架,是为应用开发者提供的开发UI的基础设施,主要包括UI控件(按钮/列表等),视图布局(摆放/排列相应的UI控件),动画机制(动画设计以及效果呈现),交互事件处理(点击/滑动等),以及相应的编程语言和编程模型等。从系统运行的维度来看,UI编程框架也包括一个运行时,负责应用在系统中执行时所需的资源加载、UI渲染和事件响应等。

总体而言,UI编程框架提供了开发以及运行UI界面所需要的框架能力,主要架构如下图所示:

78c1752e-385b-11ec-82a8-dac502259ad0.png

图1 UI编程框架

开发模型:对开发者提供开发范式、UI控件/布局/动效/交互、编程语言等。它体现的是开发效率与难易程度。

运行框架:UI界面渲染及交互的基础能力框架,包括相应的布局引擎、控件机制、动效引擎、事件机制、渲染管线等,并结合语言虚拟机和图形引擎,将开发者的程序运行在具体系统平台上。它体现的是应用运行的性能体验。

平台适配:承载框架的具体操作系统或平台适配层。

UI编程框架的关键需求,主要有以下两类:

(1)开发效率:包括代码量、学习曲线、工具、社区、三方库完备度等。

(2)性能体验:包括启动速度、帧率、响应时延、酷炫效果、资源占用等。

另外,随着智能设备的急剧增长,UI编程框架还需要考虑如何更好地适配不同设备的差异性,包括设备形态差异(比如屏幕形状、尺寸、分辨率、交互模式等),以及设备能力差异(比如内存、CPUGPU等)。

二、ArkUI框架的演进

为了更好地满足开发效率和性能体验等相关的需求, ArkUI 3.0综合考虑了UI渲染以及语言和运行时,围绕着极简开发、高性能、跨设备跨平台进一步演进。下图描述了ArkUI整体架构的演进:

7914dfac-385b-11ec-82a8-dac502259ad0.png

图2 ArkUI框架演进

图的左侧是2020年发布的JS UI框架的架构示意图。它主要支持类Web的前端开发范式,通过DSL(domain-specific language,领域特定语言)转换层,跨语言对接到声明式UI后端引擎,并结合JS引擎完成整体UI渲染。图的右侧是新的ArkUI 3.0框架,主要有以下几个关键的变化:

(1)引入了新一代的声明式UI开发范式,实现极简的UI描述语法。

(2)设计了统一的前后端扁平化渲染机制,进一步提升UI渲染的性能并降低内存消耗。

(3)深度结合ArkCompiler 3.0的方舟编译器和方舟运行时,提升语言的执行性能和跨语言通信能力。

(4)在工具方面,针对新一代的声明式UI开发范式构建了新的编译工具链和预览引擎,提供了所见即所得的实时预览机制。

另外,在ArkUI 3.0框架中,类Web范式会继续保留,即类Web范式和新一代的声明式UI范式都可以支持,可以各自独立使用,但不能混用。

三、ArkUI 3.0的关键特性

接下来我们展开详细介绍一下ArkUI 3.0的关键特性。

1. 新一代的声明式UI开发范式

具体而言,ArkUI 3.0中的新一代声明式UI开发范式,主要特征如下:

(1)基于TypeScript扩展的声明式UI描述语法,提供了类自然语言的UI描述和组合。

(2)开箱即用的多态组件。多态是指UI描述是统一的,UI呈现在不同类型设备上会有所不同。比如Button组件在手机和手表会有不同的样式和交互方式。

(3)多维度的状态管理机制,支持灵活的数据驱动的UI变更。

下面我们以一个具体的示例来说明新一代声明式UI开发范式的基本组成。如图3所示的代码示例,UI界面会显示一个“Hello World”的文本和一个“Click me”按钮。当用户点击“Click me”按钮时,字符串变量myText的值会从“World”变为“ACE”,文本最终显示为“Hello ACE”。

797ea5c2-385b-11ec-82a8-dac502259ad0.png

图3 声明式UI开发范式的基本概念

以上示例中所包含的声明式UI开发范式的基本组成说明如下:

装饰器:用来装饰类、结构体、方法以及变量,赋予其特殊的含义,如上述示例中@Entry、@Component、@State都是装饰器。@Component表示这是个自定义组件;@Entry则表示这是个入口组件;@State表示组件中的状态变量,这个状态变化会引起UI变更。

自定义组件:可复用的UI单元,可组合其它组件,如上述被@Component装饰的struct Hello。

UI描述:声明式的方式来描述UI的结构,如上述build()方法内部的代码块。

内置组件:框架中默认内置的基础和布局组件,可直接被开发者调用,比如示例中的Column、Text、Divider、Button。

事件方法:用于添加组件对事件的响应逻辑,统一通过事件方法进行设置,如跟随在Button后面的onClick()。

属性方法:用于组件属性的配置,统一通过属性方法进行设置,如fontSize()、width()、height()、color()等,可通过链式调用的方式设置多项属性。

上述示例中,用@State装饰过的变量myText,包含了一个基础的状态管理机制,即myText的值的变化,会引起相应的UI变更(Text组件)。ArkUI 3.0还提供多维度的状态管理机制。和UI相关联的数据,不仅仅在组件内使用,还可以在不同组件层级间传递,比如父子组件之间,爷孙组件之间,也可以是全局范围内的传递,还可以是跨设备传递。另外,从数据的传递形式来看,可以分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。

ArkUI采用嵌入式领域特定语言(embedded Domain Specific Language, eDSL)的形式,结合宿主语言能力实现UI开发。通过eDSL,结合语法糖或者语言原生的元编程能力,设计了统一的UI开发范式,并能够结合不同语言来实现应用的逻辑处理部分。

2. 关键渲染性能

下面通过一个简单的示例代码,为大家讲述从代码到UI显示的整体渲染流程。如图4所示,此示例会在UI界面显示一个“Click me”按钮,按钮下面同步显示按钮的点击次数。当用户点击按钮时,下面的点击次数会相应增加。

79c70466-385b-11ec-82a8-dac502259ad0.png

图4 整体渲染流程

整个渲染过程分为两个阶段:

(1)初始显示流程(步骤①~⑤)

① 源代码通过相应的工具链,编译为带有类型标志的目标文件,同时也包含了如何创建UI结构信息的指令流。

② 通过跨语言调用并生成了C++层Component树(UI描述层)。

③ 通过Component树进一步生成Element树。Element是Component的实例,表示一个具体的组件节点,它形成的Element树负责维持界面在整个运行时的树形结构,方便计算更新时的局部更新算法等。

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

⑤ 实现真正的渲染并显示绘制结果。

(2)按钮被点击后的显示流程(步骤⑥~⑪)

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

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

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

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

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

⑪ 界面显示,与⑤类似。

整个渲染过程中所需的关键能力,除了极简的开发范式本身,主要包含以下三个部分:

编译优化以及跨语言调用。结合目标文件中的类型信息标志,ArkCompiler会实现相应的代码优化。另外,ArkCompiler也提供了高效的JS/TS -》 C++跨语言调用机制。

扁平化渲染机制以及小对象组合机制。组件信息的结构在前后端有基本一致的表示,进一步减少了转换开销,实现了扁平化的渲染。同时,UI组件内部都是通过轻量化对象来按需组合,内存消耗也进一步降低。

状态管理机制。通过监听变量的存取操作,实现数据变化的自动化感知并计算出相应的最小化UI组件更新范围,实现高效的UI变更。

除此之外,长列表渲染是一种典型的应用场景,里面可能会涉及到大量的数据,如果处理不当,会引起极大影响性能以及资源占用。ArkUI 3.0针对这类常用的场景,提供了一种LazyForEach懒加载机制,会自动根据具体情况计算出合适的渲染数据,实现数据的按需加载,从而提升UI刷新效率。LazyForEach可以结合常用的列表类组件(比如List、Grid等)灵活配合使用。

3. 高级UI组件库高级的UI组件库可以进一步助力高效的应用开发。HarmonyOS的欧洲研发团队基于ArkUI 3.0,构建了一些高阶组件示例,比如:常用的图表类组件、瀑布流布局组件等。开发者可以通过几行代码就可以实现复杂酷炫的UI效果,比如自适应的图片增删、行列变化,以及相应的酷炫动效效果。

4. 多设备开发

除了UI开发套件,ArkUI 3.0围绕着多设备开发,还提供了多维度的方案,进一步简化开发:

(1)基础能力层:包括基础的分层参数配置(比如色彩、字号、圆角、间距等),栅格系统,原子化布局能力(比如拉伸、折行、隐藏等)。

(2)零部件组件层:包括多态控件,统一交互能力,以及在此基础上的组件组合。

(3)面向典型场景:提供分类的页面组合模板以及示例代码。

关于多设备开发,后面我们会有更详细的文章介绍,请大家持续关注。

5. 实时预览机制

整个开发流程中还有一个很重要的方面——预览能力,即可以在PC上通过IDE(集成开发环境)就可以实时看到应用的渲染效果,而无需通过具体设备来部署运行。预览的关键需求主要包括:

(1)一致性渲染:和目标设备一致的UI呈现效果。

(2)实时预览&双向预览:改动相应的代码,实时呈现出相应UI效果。另外,代码能够和UI双向联动,代码改动的同时UI也实时变更,UI改动的同时代码也相应地变更。

(3)多维度预览:页面级预览、组件级预览、多设备预览。

以上这些能力都需要UI编程框架具备相应的基础设施才能达成。ArkUI 3.0的预览器的整体架构如下图所示:

79f930a8-385b-11ec-82a8-dac502259ad0.png

图7 ArkUI 3.0的预览器架构

ArkUI 3.0基于底层的画布通过自绘制实现了不同平台上一致化的渲染体验,并通过渲染侧的跨平台对接层完成了整体渲染效果。另外,ArkUI 3.0通过实时代码变化检测和增量编译机制,再配合前面所提到的高效渲染性能,实现了实时编写预览。

通过ArkUI 3.0的基础设施,结合IDE可视化工具(即预览器前端),就实现了上面的实时预览、双向预览等能力,进一步提升了开发者的开发效率。

四、结束语

总体而言,UI编程框架在应用开发中起了至关重要的作用。目前,拥有全新开发范式的新一代的UI框架——ArkUI 3.0走出了坚实的第一步,并已开始支撑更多的关键应用。接下来,除了基础设施的持续完善,我们会重点支持生态扩展,主要包括高级UI能力的提升,比如三方地图,游戏的融合,以及Web能力增强等。同时,我们也会围绕跨设备、性能体验持续地创新。欢迎广大的开发者加入进来,一起探索,一起改进,共建万物互联的应用生态!未来,有迹可循!

编辑:jq

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • IDE
    IDE
    +关注

    关注

    0

    文章

    334

    浏览量

    46601
  • ui
    ui
    +关注

    关注

    0

    文章

    202

    浏览量

    21325
  • HarmonyOS
    +关注

    关注

    79

    文章

    1964

    浏览量

    29943

原文标题:HDC技术分论坛:HarmonyOS新一代UI框架的全面解读

文章出处:【微信号:HarmonyOS_Community,微信公众号:电子发烧友开源社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    新一代小米手机智能工厂全面量产

    在科技日新月异的今天,小米公司再次以实际行动诠释了其对于智能制造的深刻理解和前瞻布局。近日,小米正式宣布其位于北京昌平的新一代小米手机智能工厂全面进入量产阶段,标志着小米在智能制造领域的又
    的头像 发表于 07-09 09:41 638次阅读

    小米新一代智能手机智能工厂全面投产

    在科技日新月异的今天,小米再次以其前瞻性的布局和创新实力,引领智能制造的新纪元。7月8日,小米官方正式宣布,其新一代智能手机智能工厂全面投产,这座被誉为行业标杆的全数字化智能工厂,不仅标志着小米在智能制造领域的重大突破,更是对未来手机生产模式的
    的头像 发表于 07-08 15:23 495次阅读

    学习鸿蒙必须要知道的几个名词

    HarmonyOS提供了UI(UserInterface,用户界面)开发框架,即方舟开发框架(ArkUI
    的头像 发表于 07-06 08:04 317次阅读
    学习鸿蒙必须要知道的几个名词

    HarmonyOS NEXT Developer Beta1最新术语表

    服务 原名原子化服务,是HarmonyOS提供的种面向未来的服务提供方式,是有独立入口的(用户可通过点击服务卡片打开元服务)、免安装的(无需显式安装,由系统程序框架后台安装后即可使用)用户应用程序形态
    发表于 06-27 16:16

    HarmonyOS NEXT Developer Beta1中的Kit

    HarmonyOS NEXT Developer Preview1(API 11)版本开始,HarmonyOS SDK以Kit维度提供丰富、完备的开放能力,涵盖应用框架、系统、媒体、图形、应用服务
    发表于 06-26 10:47

    鸿蒙OS开发实战:【自动化测试框架】使用指南

    为支撑HarmonyOS操作系统的自动化测试活动开展,我们提供了支持JS/TS语言的单元及UI测试框架,支持开发者针对应用接口进行单元测试,并且可基于UI操作进行
    的头像 发表于 04-08 14:49 1229次阅读
    鸿蒙OS开发实战:【自动化测试<b class='flag-5'>框架</b>】使用指南

    润开鸿荣膺华为HarmonyOS开发服务商

    近日,华为HDD行业沙龙在北京隆重举行。在这场盛会上,HarmonyOS产品专家发表了引人入胜的议题分享,内容广泛而深入,包括HarmonyOS操作系统的全面介绍、应用特性的独到解析、意图框架
    的头像 发表于 03-29 09:47 638次阅读

    鸿蒙实战开发ArkTS运用:【ai聊天框】

    个ArkTS编写的HarmonyOS原生聊天UI框架,提供了开箱即用的聊天对话组件。
    的头像 发表于 03-08 15:38 806次阅读
    鸿蒙实战开发ArkTS运用:【ai聊天框】

    HarmonyOS开发技术全面分析

    以应用迁移为例,简要地展示了分布式任务调度能力。 图4: 分布式任务调度示意图 次开发,多端部署 HarmonyOS 提供了用户程序框架、 Ability 框架以及
    发表于 02-21 16:31

    微软发布Agent框架UFO,引领UI交互新纪元

    微软近日宣布推出全新的Agent框架——UFO(UI-Focused Agent),旨在构建更智能、更直观的用户界面交互体验。该框架基于OpenAI的GPT-4V图像识别模型开发,专为Windows操作系统上的应用程序设计,能够
    的头像 发表于 02-19 11:15 1083次阅读

    HarmonyOS SDK,助力开发者打造焕然新的鸿蒙原生应用

    鸿蒙星河版重磅发布,带来了全新架构、全新体验、全新生态。作为支撑鸿蒙原生应用开发的技术源动力,HarmonyOS SDK 将系统级能力全面对外开放,覆盖了应用框架、应用服务、系统、媒体、图形、AI
    发表于 01-19 10:31

    兆芯推出新一代桌面处理器开先KX-7000系列

    开先 KX-7000系列处理器采用新一代的“世纪大道”自主微架构,针对内核前端设计、乱序执行引擎及执行单元、以及访存层级结构等方面,进行了全新的设计和全面的优化。
    发表于 01-08 10:48 697次阅读

    HamronyOS自动化测试框架使用指南

    概述 为支撑 HarmonyOS 操作系统的自动化测试活动开展,我们提供了支持 JS/TS 语言的单元及 UI 测试框架,支持开发者针对应用接口进行单元测试,并且可基于 UI 操作进行
    发表于 12-19 10:26

    TI 新一代明星CPU

    功耗,走红了全球。 今天给大家分享的是 TI 新一代明星CPU——AM62x,它相比上一代AM335x在工艺、外设、性能等多方面都有很大提升。 这里结合米尔电子的“MYC-YM62X核心板及开发板”给
    发表于 12-15 18:59

    Redmi K70系列发布:全面进化的新一代性能旗舰

    拥有AI全面赋能的强大性能和出众能效,更有设计、屏幕、影像等旗舰体验的全面进化,以实力宣告全新Redmi K70宇宙新一代性能旗舰震撼登场。 旗舰强
    的头像 发表于 11-29 23:45 1234次阅读
    Redmi K70系列发布:<b class='flag-5'>全面</b>进化的<b class='flag-5'>新一代</b>性能旗舰