更多内容请访问：Harmonyos.51cto.com，与华为共同打造的HarmonyOS技术社区正式在Harmony3.0.0开发开发者预览版包括新一代声明式UI框架ArkUI3.0，多语言跨平台编译器ArkCompiler3.0，跨端开发工具DevEcoStudio3.0，以及基于TS/JS语言的API7，全面提升开发者体验。本期我们将重点介绍鸿蒙新一代声明式UI框架ArkUI3.0。一、UI编程框架在介绍ArkUI3.0之前，我们先简单了解一下什么是UI编程框架。UI编程框架是应用开发者提供的用于开发UI的基础设施，主要包括UI控件（按钮/列表等）、视图布局（相应UI控件的放置/排列）、动画机制（动画设计和效果渲染）、交互事件处理（点击/滑动等），以及相应的编程语言和编程模型等。从系统运行的角度来看，UI编程框架还包括运行时，负责资源加载，UI渲染，以及应用程序在系统中执行所需的事件响应。总的来说，UI编程框架提供了开发和运行UI界面所需要的框架能力。主要架构如下图所示：图1UI编程框架开发模型：为开发者提供开发范式、UI控件/布局/动效/交互、编程语言等，体现开发效率和难度。运行框架：UI界面渲染和交互的基本能力框架，包括相应的布局引擎、控制机制、动画引擎、事件机制、渲染管道等，结合语言虚拟机和图形引擎，开发者的程序运行起来在特定的系统平台上。它反映了运行应用程序的性能体验。平台适配：承载框架的特定操作系统或平台适配层。UI编程框架的关键需求主要有以下两类：（1）开发效率：包括代码量、学习曲线、工具、社区、第三方库的完备性。(2)性能体验：包括启动速度、帧率、响应延迟、炫酷效果、资源占用等。此外，随着智能设备的快速增长，UI编程框架也需要考虑如何更好地适配差异不同设备的差异，包括设备形态差异（如屏幕形状、尺寸、分辨率、交互方式等），以及设备能力差异（如内存、CPU、GPU等）。2、ArkUI框架的演进为了更好地满足开发效率和性能体验的要求，ArkUI3.0综合考虑UI渲染、语言和运行时，围绕极简开发、高性能、跨设备跨平台进一步演进。平台。下图描述了ArkUI整体架构的演进：图2ArkUI框架演进图左侧为2020年发布的JSUI框架示意图，主要支持类Web前端开发范式，通过DSL（domain-specificlanguage，领域特定语言）转换层，跨语言对接声明式UI后端引擎，并结合JS引擎完成整体UI渲染。右图是全新的ArkUI3.0框架，主要有以下关键变化：（1）引入了新一代声明式UI开发范式，实现了极简的UI描述语法。(2)设计了统一的前后端扁平化渲染机制，进一步提升UI渲染性能，降低内存消耗。(3)集成ArkCompiler3.0的方舟编译器和方舟运行时，提高语言执行性能和跨语言通信能力。(4)在工具方面，针对新一代声明式UI开发范式，构建全新的编译工具链和预览引擎，提供所见即所得的实时预览机制。此外，在ArkUI3.0的框架中，类Web范式将继续保留，即既可以支持类Web范式，也可以支持新一代的声明式UI范式，并且可以独立使用，但不能被混合。3.ArkUI3.0的主要特性接下来，我们将详细介绍ArkUI3.0的主要特性。1.新一代声明式UI开发范式具体来说，ArkUI3.0中的新一代声明式UI开发范式具有以下主要特点：（1）基于TypeScript扩展的声明式UI描述语法，提供了类自然语言的UI描述和作品。(2)开箱即用的多态组件。多态性是指UI描述是统一的，在不同类型的设备上，UI呈现会有所不同。比如Button组件在手机和手表上会有不同的风格和交互方式。(3)多维度的状态管理机制，支持灵活的数据驱动的UI变化。下面我们用一个具体的例子来说明新一代声明式UI开发范式的基本构成。如图3中的代码示例所示，UI界面将显示一个“HelloWorld”文本和一个“Clickme”按钮。当用户点击“Clickme”按钮时，字符串变量myText的值从“World”变为“ACE”，文本最终显示为“HelloACE”。图3声明式UI开发范式的基本概念上述示例中包含的声明式UI开发范式的基本组件描述如下：装饰器：用于装饰类、结构、方法和变量，赋予它们特殊的含义，如上所述在示例中，@Entry、@Component和@State都是装饰器。@Component表示这是一个自定义组件；@Entry表示这是一个入口组件；@State表示组件中的状态变量，这个状态变化会引起UI的变化。自定义组件：可复用的UI单元，可以和其他组件组合，比如上面@Component修饰的structHello。UIDescription：一种声明式的方式来描述UI的结构，比如上面build()方法里面的代码块。内置组件：框架中默认内置基础组件和布局组件，开发者可以直接调用，如示例中的Column、Text、Divider、Button。事件方法：用于给事件添加组件的响应逻辑，统一通过事件方法设置，比如Button后面的onClick()。属性方法：用于配置组件属性，通过属性方法统一设置，如fontSize()、width()、height()、color()等，可以通过链式调用设置多个属性。在上面的例子中，@State修饰的变量myText包含了一个基本的状态管理机制，即myText值的变化会引起相应的UI变化（Text组件）。ArkUI3.0还提供了多维度的状态管理机制。与UI关联的数据不仅在组件内部使用，还可以在不同组件级别之间传输，例如父子组件之间、祖孙组件之间、或全局、或跨设备。此外，从数据传输形式来看，又可分为只读的单向传输和可变的双向传输。开发者可以灵活运用这些能力，实现数据与UI的联动。ArkUI采用嵌入式领域特定语言（embeddedDomainSpecificLanguage，eDSL）的形式，结合宿主语言能力实现UI开发。通过eDSL，结合语法糖或原生语言元编程能力，设计统一的UI开发范式，可以结合不同的语言实现应用程序的逻辑处理部分。2.关键渲染性能下面是一段简单的示例代码，描述了从代码到UI展示的整个渲染过程。如图4所示，本例会在UI界面显示一个“点我”按钮，按钮下方会同步显示点击按钮的次数。当用户点击按钮时，下面的点击次数会相应增加。图4整体渲染流程整个渲染流程分为两个阶段：(1)初始显示流程（步骤①~⑤）还包含如何以Instructionstream创建UI结构的信息。②通过跨语言调用生成C++层Component树（UI描述层）。③通过Component树进一步生成Element树。Element是Component的一个实例，代表一个具体的组件节点。其形成的Element树负责在整个运行时维护界面的树结构，便于更新时计算局部更新算法。④每个可显示的Element都会创建一个对应的RenderNode。RenderNode负责一个节点的显示信息，由它形成的Render树维护着渲染整个界面所需要的信息，包括位置、大小、绘制命令等，后续的布局和绘制都是在Render树上进行的。⑤实现真实渲染并显示绘图结果。（2）点击按钮后的显示过程（步骤⑥~?）⑥将点击事件传递给组件，触发并执行组件的onClick事件方法。⑦随着onClick事件方法中@State注解变量的变化，会触发相应的getter/setter函数。⑧状态管理模块定位关联的UI组件。⑨状态管理模块更新对应Element树的信息。⑩更新相应UI组件的渲染信息。?界面显示同⑤。整个渲染过程中需要的关键能力，除了极简开发范式本身，主要包括以下三部分：编译优化和跨语言调用。结合目标文件中的类型信息标志位，ArkCompiler会进行相应的代码优化。此外，方舟编译器还提供了高效的JS/TS->C++跨语言调用机制。平面渲染机制和小对象组合机制。组件信息的结构在前后端具有基本一致的表示，进一步降低了转换开销，实现了扁平化渲染。同时，UI组件通过轻量对象按需组合，内存消耗进一步降低。状态管理机制。通过监控变量访问操作，实现数据变化的自动感知并计算对应的最小UI组件更新范围，实现高效的UI变化。另外，长列表渲染是一个典型的应用场景，可能会涉及到大量的数据。如果处理不当，将极大地影响性能和资源使用。ArkUI3.0针对此类常用场景提供了LazyForEach懒加载机制，根据具体情况自动计算出合适的渲染数据，实现数据的按需加载，提高UI刷新效率。LazyForEach可以灵活的与常用的列表组件（如List、Grid等）结合使用。3.高级UI组件库高级UI组件库可以进一步促进高效的应用程序开发。HarmonyOS欧洲研发团队基于ArkUI3.0构建了一些高阶组件示例，例如常用的图表组件、瀑布布局组件等，开发者只需几行代码即可实现复杂炫酷的UI效果，例如自适应图片增删改查，行列变化，对应炫酷动效。示例如下：图5图表组件图6瀑布图组件4.多设备开发ArkUI3.0除了UI开发包，围绕多设备开发，提供多维度的解决方案，进一步简化开发：(1)基础能力层：包括基础层次参数配置（如颜色、字体大小、圆角、间距等）、网格系统、原子布局能力（如拉伸、折叠、隐藏等）。(2)Component组件层：包括多态控件、统一交互能力，以及基于此的组件组合。(3)针对典型场景：提供分类页面组合模板和示例代码。关于多设备开发，我们稍后会推出更详细的文章，请继续关注。5.实时预览机制在整个开发过程中还有一个很重要的方面——预览能力，即可以在PC端通过IDE（集成开发环境）实时看到应用的渲染效果，而无需通过特定的设备运行部署它。预览的关键要求主要包括：(1)渲染一致：UI渲染效果与目标设备一致。(2)实时预览&双向预览：修改相应代码，实时呈现相应UI效果。此外，代码可以在两个方向上与UI链接。当代码改变时，UI也会实时改变，当UI改变时，代码也会随之改变。(3)多维预览：页面级预览、组件级预览、多设备预览。以上所有的能力都需要UI编程框架有相应的基础设施才能实现。ArkUI3.0预览器整体架构如下图所示：图7ArkUI3.0预览器架构ArkUI3.0通过基于底层canvas的自绘，通过跨平台的跨平台渲染，实现了不同平台渲染体验的一致性。渲染端对接层整体渲染效果完成。此外，ArkUI3.0通过实时代码变更检测和增量编译机制，结合前文提到的高效渲染性能，实现了实时书写预览。通过ArkUI3.0的基础架构，结合IDE可视化工具（即预览器前端），实现了上述实时预览、双向预览等能力，进一步提升了开发者的开发效率。四、结论总的来说，UI编程框架在应用程序开发中起着至关重要的作用。目前，全新开发范式的新一代UI框架ArkUI3.0迈出了坚实的第一步，开始支持更多关键应用。接下来，除了基础设施的持续完善，我们将重点支持生态扩展，主要包括高级UI能力的提升，比如三方地图、游戏集成、Web能力增强等。同时，我们将围绕跨设备和性能体验不断创新。欢迎广大开发者加入，共同探索，共同完善，共建万物互联应用生态！以后有迹可循！更多信息请访问：与华为官方共建的鸿蒙科技社区https://harmonyos.51cto.com
