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程序中的拆解示意图：

其中：

@Component表示Hello是一个自定义组件；

@Entry表示当前自定义组件为UI页面的入口(单个UI页面中，最多可以使用@Entry装饰一个自定义组件)；

@State表示myText是一个内部状态变量（任何对myText的修改，都将触发UI的刷新）；

4. UI描述

鸿蒙UI的开发在build()函数中完成，整个build()函数的开发类似于编写描述文件，我们也将buid()开发过程称为UI描述。

分析下图中的Hello World程序，它做了以下几件UI描述的事儿：

1. 创建了一个Column()垂直布局组件，组件内部配置了三个子组件；
2. 在垂直布局控件中，创建了一个Text()文本组件；
3. 紧接着接了一个Diveder()水平分割线组件；
4. 紧接着创建了一个Button按钮，并且配置属性：高度为50，宽度为100，顶部间距为20；
5. Button配置了事件监听器，将myText的值从“Hello World”改为了 “ArkUI”。

交互示意图如下：

从示意图中，我们可以总结出UI描述的几个关键点：a)创建组件；b)给组件配置属性；c)给组件配置事件监听；d）给组件添加子组件。

我们分别来了解下：

4.1 创建组件

根据组件构造方法的不同，创建组件包含有参数和无参数两种方式。

• 有参数

   如果组件的接口定义包含构造参数，则在组件后面的“()”配置相应参数，例如如下代码：

Image('https://xyz/test.jpg')

   变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。例如，设置变量或表达式来构造Image和Text组件的参数，例如如下代码：

Image(this.imagePath)
Image('https://' + this.imageUrl)
Text(`count: ${this.count}`)

• 无参数

   如果组件的接口定义没有包含必选构造参数，则组件后面的“()”不需要配置任何内容。例如，Divider组件不包含构造参数。

Column() {
  Text('item 1')
  Divider() // 无参数示例
  Text('item 2')
}

4.2 配置属性

属性方法以“.”链式调用的方式配置系统组件的样式和其他属性，建议每个属性方法单独写一行，示例代码如下：

// 配置Button属性
Button()
  .height(50)
  .width(100)
  .margin({top: 20})

// 配置Text属性
Text('Hello World')
  .fontSize(50)

4.3 配置事件

配置事件与配置属性类似

事件方法以“.”链式调用的方式配置系统组件支持的事件，建议每个事件方法单独写一行。

Button('Click me')
  .onClick(() => {
    this.myText = 'ArkUI';
  })

// case1: 匿名function，需要bind(this)
Button('add counter')
  .onClick(function(){
    this.counter += 2;
  }.bind(this))
  
// case2: 成员函数，需要.bind(this)
myClickHandler(): void {
  this.counter += 2;
}
...
Button('add counter')
  .onClick(this.myClickHandler.bind(this))

4.4 配置子组件

如果组件支持子组件配置，则需在尾随闭包"{...}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。

Column() {
// 下面的代码是Column组件d的子组件
  Text('Hello')
    .fontSize(100)
  Divider()
  Text(this.myText)
    .fontSize(100)
    .fontColor(Color.Red)

}

容器组件均支持子组件配置，可以实现相对复杂的多级嵌套。

Column() {
// 下面的代码是Column组件d的子组件
  Row() {
  // 下面的代码是Row组件d的子组件（Row嵌套在了Column中）
    Image('test1.jpg')
      .width(100)
      .height(100)
    Button('click +1')
      .onClick(() => {
        console.info('+1 clicked!');
      })
  }
}

5. 总结

至此，我们已经简单了解了鸿蒙UI开发中的两个重要概念，装饰器和UI描述，接下来，我们开始了解UI开发啦，Let's Go！