【HarmonyOS】ArkTS 声明式 UI 基础概念

如下代码是在 DevEco Studio 新建 Empty Ability 工程时自动创建的默认代码：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

下面进行分层次逐一解析每一层的含义：

一、自定义组件

struct Index {
}
1
2

可复用的UI单元

所有代码都被封装到一个 struct 结构体当中，这个结构体在 ArkTS 中被称为自定义组件，它是一个可复用的UI单元。在这个组件的内部，可以去定义页面的元素、样式、功能等。

二、装饰器

@Entry
@Component
struct Index {
  @State
}
1
2
3
4
5

用来装饰类结构、方法、变量。

• @Component：标记自定义组件
• @Entry：标记当前组件是入口组件
• @State：标记该变量是状态变量，值变化时会触发UI刷新

在这段代码中，在结构体的上面就有一个装饰器 @Component，这个装饰器代表的含义就是组件的意思，也就是说用来标记这个结构体是一个组件的，所以它们结合起来才是一个自定义组件。

在 @Component 上面还有一个装饰器 @Entry，用来标记当前组件是入口组件，也就是说这个组件是可以被独立去访问的，也就是说，它自己就是一个页面，在 App 内部可以直接访问。比如我们的首页肯定是一个入口型的组件，要加上 @Entry；首页点击按钮跳到另一个页面，那肯定也是一个入口型的组件，所以这些都要加上 @Entry。如果组件不加 @Entry，它就是一个普通组件，不能直接显示，必须被其它的入口型组件引用，也就是说只是用来作页面元素的封装，起到一个可复用的效果。

@State 的作用是用来标记一个变量是状态型变量，这样的变量就会被 ArkTS 去监控，一旦这个变量的值发生了变更，会去触发这个组件内部跟这个变量有关的页面元素重新渲染，这样就很容易的实现页面的动态变化。

三、UI描述

build() {
}
1
2

其内部以声明式方式描述UI结构

用来描述组件内部的UI结构，描述的方式是声明式UI，在鸿蒙开发套件中，有一个叫做 ArkUI，它里面定义好了大量的UI范式和UI组件，因此，只需要利用它描述一下页面长什么样子，就会自动渲染，非常方便。

四、内置组件

Row() {
  Column() {
    Text(this.message)
  }
}
1
2
3
4
5

ArkUI 内置的组件

• 容器组件：用来完成页面布局，例如 Row（行式布局）、Column（列式布局）
• 基础组件：自带样式和功能的页面元素，例如 Text（文本组件）

五、属性方法

Text(this.message)
   .fontSize(50)
   .fontWeight(FontWeight.Bold)
1
2
3

Row() {
  Column() {
  }
  .width('100%')
}
.height('100%')
1
2
3
4
5
6

设置组件的UI样式

比如 Text 组件被声明出来以后，去调用它的 fontSize 方法，就是去修改字体大小；调用 fontWeight 方法，就是去修改字体的粗细。

行和列指定了宽度100%、高度100%，这样呢，元素就把整个页面给撑满了。

所以这些都是用来控制UI的属性方法。

六、事件方法

Text(this.message)
  .onClick(() => {
    // ... 处理点击事件
  })
1
2
3
4

设置组件的事件回调

Text 调用了一个 onClick 方法，然后传了一个回调函数，在里面编写业务逻辑，每当 Text 被点击时就会去触发并执行业务逻辑。

因此任何一个组件都会有属性方法和事件方法，分别用来去控制组件的样式和添加事件回调。