目录

导言：开启鸿蒙应用开发的新范式

ArkUI框架概览 - 鸿蒙UI的灵魂

深入核心 - 声明式UI开发范式

命令式 vs 声明式：范式革命

ArkUI如何实现声明式？

创建内置组件

创建自定义组件

自定义组件的基本结构

ArkUI框架的核心特性与优势

ArkUI开发基础 - 语言与工具

ArkUI的应用场景与未来展望

本章总结：拥抱未来UI开发范式

---

导言：开启鸿蒙应用开发的新范式

欢迎进入鸿蒙应用开发的奇妙世界！在万物互联的时代，应用需要跨越手机、平板、智慧屏、手表、车机等多样设备的边界，提供无缝流转、一致体验的服务。这对传统的UI开发模式提出了巨大挑战。回顾传统UI开发（如Android View系统）在多设备适配、代码维护、开发效率上的瓶颈（如繁琐的布局编写、复杂的状态管理、难以应对动态变化）。鸿蒙操作系统（HarmonyOS）为应对这一挑战，推出了革命性的ArkUI框架。它不仅仅是一个UI库，更代表了一种全新的开发理念和范式——声明式UI开发。本章将带您深入理解ArkUI的设计思想、核心特性、架构优势以及它如何赋能开发者高效构建面向未来的全场景应用。这是您掌握鸿蒙开发精髓的第一步。

ArkUI框架概览 - 鸿蒙UI的灵魂

什么是ArkUI？

ArkUI是HarmonyOS应用开发的UI开发框架，提供了一套简洁自然的UI描述语法、丰富的UI组件以及强大的状态管理机制。它是构建HarmonyOS应用用户界面的基础，是连接应用逻辑与用户交互的桥梁。简化开发、提升性能、实现跨设备一致性、支持动态响应。

ArkUI的诞生背景与使命

鸿蒙“1+8+N”战略下，应用需无缝运行于不同屏幕尺寸、交互方式和能力的设备上。解决传统开发模式代码冗余、调试困难、学习曲线陡峭的问题。借鉴React、Flutter、SwiftUI等优秀框架的声明式思想，并结合鸿蒙自身特性进行创新。

ArkUI的核心设计理念

• 声明式UI (Declarative UI)：  开发者只需关注“UI应该是什么样子”（What），而不是“如何一步步构建UI”（How）。框架负责根据状态变化自动、高效地更新视图。

• 组件化 (Component-Based)： UI由可复用、可组合的组件构成，提高代码复用率和可维护性。

• 状态驱动 (State-Driven)： UI是应用状态的可视化表达。状态变化是UI更新的唯一驱动力。

• 响应式设计 (Reactive Design)： UI能够自动响应状态的变化和数据流的更新。

深入核心 - 声明式UI开发范式

命令式 vs 声明式：范式革命

• 命令式UI (Imperative UI - 传统方式)：

  • 典型代表：Android View/XML, iOS UIKit。

  • 特点：开发者需要详细指定构建UI的每一步操作（创建View、设置属性、添加到父View、手动更新等）。需要直接操作DOM/View树。

  • 痛点：代码冗长、易出错、状态与UI同步逻辑复杂、跨设备适配困难。

  • 举例说明：一个计数器按钮的实现步骤（查找View、设置监听器、在回调中查找TextView、更新文本）。

• 声明式UI (Declarative UI - ArkUI方式)：

  • 特点：开发者只需根据当前应用状态，描述UI最终应该呈现的样子。框架负责将状态渲染为UI，并在状态变化时自动、高效地计算出最小的UI更新。

  • 核心优势：

    • 代码简洁： 极大减少样板代码。

    • 逻辑清晰： UI描述集中、直观，状态与UI绑定关系明确。

    • 高效更新： 框架进行智能Diffing，只更新必要的部分。

    • 易于维护： 状态管理集中化，UI结构更易理解。

    • 天然支持响应式： 状态变，UI自动变。

ArkUI如何实现声明式？

• 基于组件的描述： UI通过嵌套的组件树来描述。

• 状态与UI绑定： 使用特定的语法（如@State, @Prop, @Link等装饰器）将UI组件的属性或结构动态绑定到应用的状态数据上。

• 响应式更新引擎： 框架内部维护一个虚拟的UI表示（类似Virtual DOM概念），监听状态变化。当状态改变时，框架比较新旧虚拟表示，计算出最小变更集，然后高效地更新实际渲染的UI。

创建内置组件

创建组件的方式有两种：无参数组件和带参数组件。

无参数组件：创建组件时，未添加任何参数。

Column() {Divider()Button()
}

有参数组件：创建组件时，添加参数。

Column {Text("Hello HarmonyOS")
}

配置属性：属性方法以“.”链式调用配置组件样式和其他属性。

Column {Text("Hello HarmonyOS").fontSize(20).fontWeight(FontWeight.Bold)
}

配置事件：事件方法以“.”链式调用的方式配置系统组件支持的事件。

Column {Button("Hello").onClick(() => {console.log('Hello')})
}

创建自定义组件

在ArkUI框架中，自定义组件（Custom Component）是开发者根据自身业务需求，将UI元素、样式、状态和行为逻辑封装成的独立、可复用的单元。它不仅是代码复用的利器，更是构建模块化、可维护大型应用架构的核心。其特点主要体现在以下几个方面：

• 高封装性与内聚性： 自定义组件将实现特定功能或展现特定视图所需的UI结构（build()方法）、样式、状态（@State, @Prop等）以及交互逻辑（事件处理函数） 封装在一个独立的单元内。
• 强大的复用性：自定义组件可以在应用的多个地方（甚至不同项目） 重复使用，就像使用系统内置的Button、Text组件一样。
• 灵活的可组合性：自定义组件本身可以作为更小组件的容器，也可以作为更大组件的组成部分。组件可以嵌套组合，形成复杂的UI树。

@Component
struct CustomComponent {@state title: string = "Hello Harmony";build() {Row() {Text(this.title).onClick(() => {this.title = "Hi Harmony";})}}
}

在其他文件中引用自定义组件，需要使用export关键字导出组件。

import CustomComponent from '../common/component/CustomComponent';@Entry
@Component
struct Index {build() {Column() {Text("Hello HarmonyOS")CustomComponent({ message: 'Hello' })}}
}

自定义组件的基本结构

struct：自定义组件基于struct实现，struct + 自定义组件名 + {...}的组合构成自定义组件，不能有继承关系。

@Component：装饰器，具备以下特点。

1. @Component + struct： 定义了组件的基础容器和身份。

2. 实现 build()： 定义了组件的核心功能 - UI 呈现。没有 build() 的 @Component struct 是不完整的，无法渲染。

3. 单一 @Component 装饰： 保证了组件定义的清晰性和唯一性，是框架正确管理和渲染组件树的基础。

@Component可以接受一个可选的boolean类型参数。

名称	类型	必填	说明
freezeWhenInactive	boolean	否	是否开启组件冻结。默认值false。true：开启组件冻结，false：不开启组件冻结。

@Component({ freezeWhenInactive: true })
struct MyComponent {}

build()函数：自定义组件必须使用的函数，用于声明UI描述。

@Component
struct MyComponent {build() {}
}

@Entry：自定义组件的UI入口。@Entry可以接受参数。在单个UI页面中，仅允许使用一次。

名称	类型	必填	说明
routeName	string	否	表示作为命名路由页面的名字。
storage	LocalStorage	否	页面级的UI状态存储。
useSharedStorage	boolean	否	是否使用LocalStorage.getShared()接口返回的共享的LocalStorage实例对象。默认值false。true：使用共享的​​​​​​​LocalStorage实例对象。false：不使用共享的​​​​​​​LocalStorage实例对象。

@Entry({ routeName : 'myPage' })
@Component
struct MyComponent {
}

@Reusable：使组件具备可复用的能力。

@Reusable
@Component
struct MyComponent {
}

ArkUI框架的核心特性与优势

1. 丰富的UI组件库：

   • 提供大量开箱即用的基础组件（Text, Button, Image, TextInput等）和容器组件（Column, Row, Stack, List, Grid等）。

   • 针对鸿蒙特性提供专用组件（如分布式能力相关的组件）。

   • 支持自定义组件，满足个性化需求。

2. 强大的状态管理机制：

   • 多层级状态管理装饰器： @State (组件私有状态), @Prop (父子单向同步), @Link (父子双向同步), @Provide/@Consume (跨组件层级共享), @Observed/@ObjectLink (复杂对象状态管理)。

   • 状态管理库： 支持更复杂应用的状态管理方案（如基于ArkTS的轻量级状态管理库或结合第三方库思想）。

   • 核心价值： 清晰界定状态作用域，简化数据流，确保UI与状态一致性。

3. 高效的渲染机制：

   • 声明式带来的优化： 最小化UI更新范围。

   • 平台级优化： 鸿蒙系统底层对ArkUI渲染管线的深度优化。

   • 流畅体验保障： 旨在为全场景设备提供流畅的60fps+用户体验。

4. 跨设备适配能力 (一次开发，多端部署)：

   • 响应式布局： 提供强大的弹性布局（Flex）、百分比、栅格系统、媒体查询等能力，使UI能自适应不同屏幕尺寸。

   • 资源限定词： 支持根据不同设备特性（屏幕密度、国家语言、横竖屏等）加载不同的资源。

   • 组件能力差异化： 部分组件在不同设备类型上有不同的最佳实践或形态，ArkUI框架提供了统一的描述和差异化的渲染支持。

ArkUI开发基础 - 语言与工具

开发语言：ArkTS

• ArkUI框架主要使用ArkTS语言进行开发。

• ArkTS简介：基于TypeScript (TS)，是鸿蒙生态的应用开发语言。它继承了TS的静态类型、面向对象、异步并发等特性，并针对鸿蒙开发进行了扩展和优化（如增加了上述状态管理装饰器）。

• 为什么选择ArkTS？ 类型安全、开发高效、生态兼容（TS生态庞大）、性能优良（AOT编译）、为声明式UI量身定制语法糖。

开发工具：DevEco Studio

• 官方集成开发环境 (IDE)，提供项目创建、代码编辑、UI预览、调试、模拟器/真机运行、应用打包等全套功能。

• 强大的UI预览器： 支持多设备、多形态（折叠屏展开/折叠状态）、深浅色主题、多语言的实时预览，极大提升声明式UI开发效率。

• 模拟器： 提供丰富的设备类型模拟器，方便跨设备调试。

ArkUI的应用场景与未来展望

典型应用场景：

• 全场景应用： 手机、平板、智慧屏、手表、车机等设备上的应用。

• 元服务 (原子化服务)： 鸿蒙特色的轻量化服务，ArkUI是其实现UI交互的主要技术。

• 富媒体、复杂交互应用： 利用其高效渲染和动画能力。

• 需要高一致性和流畅体验的应用。

未来发展趋势：

• 更强大的开发工具链： DevEco Studio持续增强对声明式UI和状态管理的支持。

• 更丰富的组件与能力： 官方持续扩充组件库，集成更多鸿蒙分布式能力。

• 性能持续优化： 底层渲染引擎和AOT编译的进一步优化。

• 社区生态壮大： 更多第三方UI库、组件、工具涌现。

• AI赋能开发： 探索AI辅助生成UI代码、智能布局的可能性。

本章总结：拥抱未来UI开发范式

ArkUI框架是鸿蒙应用开发的基石，其声明式UI范式带来了开发效率、代码可维护性和跨设备能力的巨大飞跃。掌握ArkUI，不仅是学习一个新的UI框架，更是掌握构建未来全场景智慧应用的核心技能。本章为您建立了ArkUI的理论基础。在接下来的章节中，我们将深入实践，从搭建环境开始，一步步学习如何使用ArkTS和ArkUI组件构建出功能丰富、体验卓越的鸿蒙应用！准备好动手了吗？