ArkTS 声明式 UI 基础概念

[cnwutianhao]

如下代码是在 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. 自定义组件

   struct Index {
   }
   

   可复用的UI单元

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

2. 装饰器

   @Entry
   @Component
   struct Index {
     @State
   }
   

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

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

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

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

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

3. UI描述

   build() {
   }
   

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

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

4. 内置组件

   Row() {
     Column() {
       Text(this.message)
     }
   }
   

   ArkUI 内置的组件

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

5. 属性方法

    Text(this.message)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
   

   Row() {
     Column() {
     }
     .width('100%')
   }
   .height('100%')
   

   设置组件的UI样式

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

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

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

6. 事件方法

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

   设置组件的事件回调

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

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