【HarmonyOS】ArkUI - 声明式开发范式

一、UI 开发框架

在 HarmonyOS 开发中，官方主要推出了两种开发框架，一个是基于 Java 的，一个是基于 ArkTS 的。

基于 Java：应用中所有用户界面元素都由基础组件 Component 和组件容器 ComponentContainer 对象构成。
基于 ArkTS：包括组件和页面，组件时页面搭建的最小单位，通过组建的组合构建界面，页面 Page 是框架的最小调度分割单位，可以有多个功能页面，再通过路由API 进行页面跳转和统一管理。

而后，基于 ArkTS 的 UI 开发，出现了两种开发范式，一种是基于 JS 的类 Web 开发范式和基于 eTS 的声明式开发范式，后变为基于 ArkTS 的声明式开发范式。

基于 JS 的类 Web 开发范式：传统三件套
基于 ArkTS 的声明式开发范式：采用 TS 语言，进行声明式 UI 语法扩展，从组件，状态管理和动效三个维度提供绘制能力。

二、声明式开发范式

在鸿蒙操作系统（HarmonyOS）中，声明式开发范式是一种以 "描述 UI 应该是什么样子" 为核心的开发模式，与传统的 "命令式开发范式"（通过代码一步步操作 UI 状态变化）形成对比。它更贴近自然语言的逻辑，让开发者聚焦于 UI 的结构和交互规则，而非具体的实现步骤。

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

ArkTS 语言：TS 的超集，包含 TS 所有特性，扩展了声明式UI、状态管理等。
**布局：**定义了组件在界面中的位置。有线性布局、层叠布局等
组件：组件是UI的必要元素，形成了在界面中的样子，由框架直接提供的称为系统组件 ，由开发者定义的称为自定义组件。
**页面路由和组件导航：**应用可能包含多个页面，可通过页面路由实现页面间的跳转。一个页面内可能存在组件间的导航如典型的分栏，可通过导航组件实现组件间的导航。
**动画：**动画是UI的重要元素之一。组件内置动画效果外，还包括属性动画、显式动画、自定义转场动画以及动画API等。
**交互事件：**交互事件是UI和用户交互的必要元素。触摸事件、鼠标事件等。
**自定义能力：**自定义能力是UI开发框架提供给开发者对UI界面进行开发和定制化的能力。

1、声明式开发范式的核心特点

关注 "结果" 而非 "过程" 开发者只需通过代码描述 UI 的最终形态（如布局、样式、数据绑定关系），系统会自动处理从数据到 UI 的映射逻辑，以及 UI 的更新过程。例如：若要展示一个列表，只需声明 "列表项由数组items渲染，每个项显示item.name"，无需手动编写 "循环创建控件、添加到容器" 的命令式代码。
数据驱动 UI 当数据发生变化时，系统会自动对比前后数据差异，只更新受影响的 UI 部分（即 "差分更新"），无需 JS Framework手动操作 DOM 或控件状态。这种机制大幅减少了 "数据 - UI 同步" 的代码量，降低了出错概率。
声明式语法鸿蒙的声明式开发主要通过ArkTS 语言实现，其语法简洁直观，支持类似 HTML 的标签式写法和数据绑定表达式。例如：

TypeScript 复制代码

// 声明一个包含文本和按钮的组件
@Component
struct HelloComponent {
  @State count: number = 0; // 声明状态变量
  
  build() {
    Column() { // 声明垂直布局容器
      Text(`点击次数: ${this.count}`) // 文本与状态绑定
        .fontSize(20)
      Button('点击我') // 声明按钮
        .onClick(() => { this.count++ }) // 绑定点击事件，修改状态
    }
  }
}

2、与命令式开发的对比

维度	命令式开发	声明式开发（鸿蒙）
核心逻辑	手动编写 "创建 - 修改 - 删除" UI 的步骤	描述 UI 的结构、数据关系和交互规则
数据与 UI 同步	需要手动监听数据变化并更新 UI（易出错）	系统自动同步，数据变则 UI 变
代码复杂度	随 UI 复杂度上升而急剧增加	复杂度更平缓，聚焦业务逻辑
可读性	需跟踪代码执行流程才能理解 UI 最终形态	直观易懂，代码即 UI 结构描述

3、整体架构

应用层（最上层）

用户直接交互的应用程序。开发者基于鸿蒙的声明式 UI 框架编写应用，例如天气 App、计算器 App 等。

声明式 UI 前端

提供UI开发范式的基础语言规范，，并提供了内置的UI组件，布局和动画，多种状态管理机制，一系列接口。

语言运行时

提供针对UI范式语法的解析能力，跨语言调用支持能力和TS高性能运行环境。

声明式 UI 后端引擎

提供了兼容不同开发范式的UI渲染管线，多种基础组件，布局计算，动效，交互事件

渲染引擎

高效的绘制能力

平台适配层

提供了对系统平台的抽象接口，具备介入不同系统的能力。

OS（最底层）

作用：操作系统内核，提供基础服务。
说明：例如进程管理、内存管理、驱动程序等。

三、基于 ArkUI 的项目

1、鸿蒙声明式开发范式（ArkUI）

声明式开发的核心是：通过描述 UI 的结构和状态，让框架自动处理渲染逻辑，开发者无需手动操作 DOM 或组件更新。

TypeScript 复制代码

@Entry
@Component
struct CounterPage {
  // 声明状态变量（数据驱动UI）
  @State count: number = 0;

  build() {
    // 声明UI结构（描述"是什么"）
    Column() {
      Text(`当前计数：${this.count}`)  // 文本组件，绑定count状态
        .fontSize(20)
        .margin(10)

      Button('点击加1')  // 按钮组件
        .onClick(() => {
          this.count++;  // 只修改状态，UI自动更新
        })
        .backgroundColor('#007DFF')
        .fontColor('#FFFFFF')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

声明式特点：

状态驱动：@State 装饰的 count 变化时，框架自动更新依赖它的 Text 组件。
结构直观：通过嵌套组件（Column 包含 Text 和 Button）描述 UI 层次，类似 HTML 的结构但更简洁。
无需手动操作：不需要像命令式那样调用 setText()、setOnClickListener() 等方法。

2、文件结构

在应用的目录结构中， ets 目录下的文件一般以 .ets 结尾的是 ArkTS 文件， ets 是 extended TypeScript 的缩写， ets 文件一般用于描述 UI 布局、样式、事件交互和页面逻辑等。以. ts 为扩展名的文件为 TypeScript 文件。

在 ets 目录下，可以包含多个子目录，一般一个子目录用于实现一个 Ability 。在基于 Stage 模型的开发中， Ability 和 Pages 存放在该目录下，每个 Ability 对应一个文件夹，其下对应一个 Ability 的 ts 实现文件。

资源目录 resources 文件夹位于 src / main 下，应用的资源文件（字符串、图片、音频等）统一存放于 resources 目录下，便于开发者使用和维护。 resources 目录包括三大类目录，一类为 base 目录，一类为限定词目录，另一类为 rawfile 目录。

四、声明式语法

1、UI 描述规范

基于 ArkTS 的声明式开发方式创建的应用，在 Stage 模型下，由 UIAbility 负责 UI 界面，每个 UIAbility 有一 windowstage 负责窗口管理，窗口负责显示页面（ Page )，每个页面的内部可以包含多个组件，其中必须有且只有一个入口（ Entry ）组件，组件内部可以嵌套其他组件。

因此，无论是 FA 模型还是 Stage 模型，一个页面（ Page ）对应一个 ETS 文件，一个页面内可以有若干个组件，基于 ArkTS 语言定义组件采用 struct 关键字，并通过生成器函数( build ()）构建组件内的内容，组件内可以包含其他组件，其他组件可以是系统的内置组件，也可以是自定义的组件。一个页面必须有且只有一个入口组件，入口组件由＠ Entry 装饰器修饰。构建一个页面的基本代码如下：

TypeScript 复制代码

@ Entry 
/／入口装饰器
@ Component 
/／组件装饰器
 struct MyIndexComponent {
@ State mydata : string =''
/／状态数据
 build (){
/／生成器函数
/／省略了构造内部组件
  }
}
@ Component
 struct OtherComponent {
@ State msg : string =
 build (){
/／构造内部组件
  }
}

在生成器方法内构建的界面组件组成一棵树形结构，组件包括容器和普通组件，容器可以认为是特殊的组件，其内部可以放置别的组件或容器，容器组件也称为布局，普通组件一般不能包含其他组件。

2、组件化

由装饰器@Component装饰的struct结构体具备了组件化能力,是一个独立的组件，这种组件也称为自定义组件,自定义组件在其生成器build方法里进行UI结构描述,使其具有丰富的界面展示。

(1)可组合:自定义可以由其他组件组合而成,允许开发者在自定义组件内使用内置组件、其他组件、公共属性和方法等。

(2)可重用:自定义组件可以被其他组件使用,作为别的组件的一部分,并且可以重用，可以作为不同的实例在不同的父组件或容器中使用。

(3)数据驱动更新:自定义组件由状态变量的数据驱动,可以实现UI自动刷新。

(4)生命周期:自定义组件具有生命周期,具有相应的回调方法,开发者可以重写回调方法以实现组件自身的业务功能和逻辑。

(5)生成器方法:自定义组件必须定义生成器build方法,该方法用于构建组件内容。(6)无构造函数:自定义组件不能定义构造函数,组件内容的初始化构造是通过build完成的。

TypeScript 复制代码

@component
struct OC {
  build(){
    Column() {
      MC() // 实例化自定义组件
      
      Text('adf') // 使用系统组件
      
      MC()
    }
  }
}

组件的结构重用可以看这里：【HarmonyOS】ArkUI - 自定义组件和组件扩展