ArkUI基本介绍

ArkUI：提供HarmonyOS应用UI开发框架，几件开发、精致体验、跨设备/跨平台。

ArkUI（方舟UI框架）为应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行丰富页面的开发。

• 声明式开发范式：采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力。

• 类Web开发范式：采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟UI框架应用。

1、ArkUI框架结构

•  开发模型层：提供了UI开发范式的基础语言规范，并提供内置的UI组件、布局和动画，提供了多种状态管理机制，为应用开发者提供一系列接口支持。
• 引擎层：后端引擎提供了兼容不同开发范式的UI渲染管线，提供多种基础组件、布局计算、动销、交互事件，提供了状态管理和绘制能力。提供了高效的绘制能力，将渲染管线收集的渲染指令，会知道屏幕能力。
• 平台抽象层：提供了针对不同操作系统渲染层的适配，可抹平不同平台的接口差异，实现ArkUI框架的多平台一致性，

 

                                方舟UI框架示意图

2、ArkUI的优点

• 开发效率： 声明式开发范式更接近自然语义的编程方式，开发者可以直观地描述UI，无需关心如何实现UI绘制和渲染，开发高效简洁。

• 应用性能： 如下图所示，两种开发范式的UI后端引擎和语言运行时是共用的，但是相比类Web开发范式，声明式开发范式无需JS框架进行页面DOM管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。

• 发展趋势：声明式开发范式后续会作为主推的开发范式持续演进，为开发者提供更丰富、更强大的能力。

3、ArkUI的特性

 

应用模型	页面形态	支持的UI开发范式
Stage模型（推荐）	应用或服务的页面	声明式开发范式（推荐）
	卡片	声明式开发范式（推荐） 类Web开发范式
FA模型	应用或服务的页面	声明式开发范式 类Web开发范式
	卡片	类Web开发范式

 4、ArkUI、ArkTS、声明式开发范式

        ArkUI：为应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行丰富页面的开发。

        ArkTS：是UI开发语言，基于typescript语言扩展而来，是TS的超集。扩展能力包含各种装饰器、自定义组件、UI描述机制。

        声明式开发范式：基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架，提供了构建HarmonyOS应用UI所必需的能力。

5、声明式UI和命令式UI对比

        命令式开发范式代码如下：

<DirectionalLayout ...><Text ...ohos:text="HarmonyOS Developer World" /><Button ...ohos:text="Join Now" />
</DirectionalLayout>

        基于ArkTS的声明式开发范式代码如下：

Column() {Text("HarmonyOS Developer World")Button("Join Now")
}

         与命令式开发范式相比，声明式主要有以下几个优点：

• 对于系统使用方，通过设计声明式的接口，开发者无需关心底层实现，而更多关注上层业务；
• 对于系统的实现方通过声明式的接口，上层使用者接口相对稳定，系统可以不断的迭代优化；
• 对整个系统而言，能够更系统的收集更多信息，能够依据策略进行系统行为优化，提升系统效率。

 6、声明式UI和类Web开发范式对比

        ArkUI为不同的开发者，提供了两种开发范式：基于ArkTS扩展的声明式开发范式和基于JS扩展的类Web开发范式 。

        基于JS扩展的类Web开发范式，代码如下：

<div class="container"><text class="text">{{ "HarmonyOS Developer World" }}</text><button class="button">{{ "Join Now" }}</button>
</div>

  7、声明式开发范式

        基于ArkTS的声明式开发范式的核心是：数据驱动UI页面更新     

         

        声明式UI是西永选用的新一代开发范式，通过数据驱动UI变化，UI逻辑分离，更直观，更高效。

        关键特征：

                a、类自然语言的UI结构描述

                b、积木式组件组合

                c、极简语法 

         

8、常用组件 

         a、按钮（Button）

        通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button作为容器使用时，可以通过添加子组件实现包含文字、图片等元素的按钮。

Button('OK', { type: ButtonType.Normal, stateEffect: true}).borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {console.log('Button is OK')})

        b、文本显示（Text）

        通常用于展示用户视图，如显示文章的文字。

Text('文本').fontSize(20).width(300).border({width:1})

        c、显示图片（Image）

        在应用中显示图片需要使用Image实现，支持多种图片格式，如png、jpg、bmp、gif、svg等。

Image($r('app.media.pic_name')).width(100).height(100).margin(15)

        d、线性布局（Row/Column）

        是开发中最常用的布局，通过线性容器Row和Column构建。线形图布局的子元素在线性方向上依次排列，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。

Column( {space: 50}) {Column().width('90%').height(50).backgroundColor(0xAFEEEE)Column().width('90%').height(50).backgroundColor(0x0FFFFF)Column().width('90%').height(50).backgroundColor(0x00FFFF)
}
.width('100%')Row( {space: 50}) {Row().width('20%').height(350).backgroundColor(0xAFEEEE)Row().width('20%').height(350).backgroundColor(0x0FFFFF)Row().width('20%').height(350).backgroundColor(0x00FFFF)
}
.width('100%')

        

        e、其他组件