ArkUI基本介绍

最新推荐文章于 2024-08-30 23:49:27 发布

煸橙干儿~~

最新推荐文章于 2024-08-30 23:49:27 发布

阅读量1.1k

点赞数 20

分类专栏： HarmonyOS 文章标签： harmonyos

本文链接：https://blog.csdn.net/sinat_34896766/article/details/141156322

版权

HarmonyOS 专栏收录该内容

79 篇文章 1 订阅

订阅专栏

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%')