第四讲_ArkTS装饰器（一）_ark ts的装饰器

1. @Builder装饰器

@Builder是一种更轻量的 UI 元素复用机制，可以将重复使用的 UI 元素抽象成一个方法，并用@Builder修饰该方法，此方法就可以在 build() 里调用。

ps：自定义组件的build()方法中，不允许调用没有被@Builder装饰的方法

1.1 在组件内定义构建函数

• 构建函数是该组件的私有、特殊类型的成员函数，只能在组件内被访问。
• 构建函数中，this 指当前所属组件，组件的状态变量可以在构建函数内访问。

@Entry
@Component
struct FirstComponent {
  @Builder MyBuilderFunction() {
    Text("我是在@builder里的Text")
      .fontSize(30)
  }

  build() {
    // Column是一个容器组件，在后面的博文会详细介绍
    Column() {
      this.MyBuilderFunction()
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.2 全局定义构建函数

• 全局定义的构建函数可以被整个应用获取。
• 如果不涉及组件状态变化，建议使用全局定义构建方法。

@Entry
@Component
struct FirstComponent {

  build() {
    // Column是一个容器组件，在后面的博文会详细介绍
    Column() {
      // 调用全局构建函数
      MyGlobalBuilderFunction()
    }
  }
}

// 定义全局构建函数，需要添加function关键字
@Builder function MyGlobalBuilderFunction() {
  Text("我是在@builder里的Text")
    .fontSize(30)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2. @BuilderParam装饰器

@BuilderParam用来装饰指向@Builder方法的变量，可在初始化自定义组件时对此属性进行赋值。

@Entry
@Component
struct Parent {
  @Builder MyBuilderFunction() {
    Text("我是在@builder里的Text")
      .fontSize(30)
  }

  build() {
    Column() {
      // 使用自定义组件Child，并用MyBuilderFunction初始化自组件的builder参数
      Child({ builder: this.MyBuilderFunction} )
    }
  }
}

@Component
struct Child {
  // 定义一个指向被@Builder修饰的方法的成员变量
  // 并且要求这个被@Builder修饰的方法：没有入参，没有返回值
  @BuilderParam builder: () => void;

  build() {
    Column() {
      this.builder()
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28