ArkTS装饰器(一)
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 全局定义构建函数
- 全局定义的构建函数可以被整个应用获取。
- 如果不涉及组件状态变化,建议使用全局定义构建方法。
@Entry
@Component
struct FirstComponent {
build() {
// Column是一个容器组件,在后面的博文会详细介绍
Column() {
// 调用全局构建函数
MyGlobalBuilderFunction()
}
}
}
// 定义全局构建函数,需要添加function关键字
@Builder function MyGlobalBuilderFunction() {
Text("我是在@builder里的Text")
.fontSize(30)
}
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()
}
}
}