鸿蒙UI开发快速入门 —— part01: 装饰器&UI描述

1. 背景

在鸿蒙开发中，ArkTS是优选的主力应用开发语言。

ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。

因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力，本文的假设前提为，读者拥有TS编程经验。

2. 综述

学习UI开发，一般关注以下三个问题：

1）界面和控件如何编写；

2）状态管理和组件间的数据传递如何实现；

3）用户交互时，如何做到界面渲染控制。

在展开讲界面和控件编写前，本文先介绍两个UI相关的核心概念：装饰器、UI描述。

3. 装饰器

在鸿蒙开发中，关键的UI相关的定义（界面入口、自定义组件、状态变量、样式定义等）都是通过装饰器来标注。

常用的装饰器例如：@Entry、@Component、@State、@Builder、@Extend、@Styles等。

• @Component表示自定义组件；

• @Entry表示该自定义组件为入口组件；

• @State表示组件中的状态变量，状态变量变化会触发UI刷新；

• @Builder/@BuilderParam：特殊的封装UI描述的方法，细粒度的封装和复用UI描述；

• @Extend/@Styles：扩展内置组件和封装属性样式，更灵活地组合内置组件；

下面是一个Hello World程序中的拆解示意图：