ArkTs装饰器之@Builder

@Builder装饰器

概念

自定义构建函数
ArkUI提供了一种轻量的UI元素复用机制@Builder，其内部UI结构固定，仅与使用方进行数据传递
@Builder所装饰的函数遵循build( ) 函数语法规则
开发者可以将重复使用的UI元素抽象成一个方法，在build中进行调用
我们将@Builder装饰的函数也成为"自定义构建函数"

使用说明

私有自定义构建函数

允许在自定义组件内定义一个或者多个@Builder方法，该方法被认为是该组件私有，特殊类型的成员函数
私有自定义构建函数（@Builder）可以在所属组件的build方法和其他自定义构建函数（@Builder）中调用
不允许在组件外部调用
在自定义函数体中，this 指向当前所属组件，组件的状态变量可以在自定义构建函数内访问
建议通过this访问自定义组件的状态变量，不是通过参数传递

typescript 复制代码

@Entry
@Component

struct test_page01{

  @State message:string = 'nihao'
  @Builder
  text_dis(){
    Column(){
      Text(this.message)
        .fontSize(20)
    }
  }

  build() {
    Column({space:20}){
      this.text_dis()
      Button('点击改变')
        .onClick(()=>{
          this.message = '你好'
        })
    }
    .height('100%')
    .width('100%')
  }
}

全局自定义函数

全局的自定义构建函数可以被整个应用获取（前提是要export）
不允许使用this和bind（改变指向）方法
如果不涉及组件状态变量，建议使用全局的自定义构建方法

参数传递的规则：

自定义构建函数的参数传递有
- 按值传递
- 按引用传递（如果传递的参数为状态变量，可以支持监听UI的刷新）
均遵循以下规则：
- 参数的类型必须与参数声明的类型一致
- 在@Builder修饰的函数内部，不允许修改参数值
- @Builder内UI语法遵循build( ) UI语法规则
- 只有传入一个参数，且参数为直接传入对象字面量，才能按引用传递该参数，其余的方式均按值传递
按引用传递参数
- 如果在@Builder方法中调用自定义组件，ArkUI提供
  - $$作为引用传递参数的范式
  - 如果使用自定义的参数名传递给自定义组件，如果自定义组件使用@Link接受，会报错
按值传递参数
- 调用@Builder装饰的函数默认按值传递
  - 当传递的参数为状态变量时，状态变量的改变，不会引起@builder方法内的UI刷新
  - 当使用状态变量的时候，推荐使用引用变量传递

typescript 复制代码

// 引用传递第一种写法
class temp_class01{
  param:string = ''
  param1:string = ''
}

// 引用传递第二中写法
class temp_class02{
  param:string = ''
  param1:string = ''
}


@Entry
@Component
struct temp_page103{
  @State param_build:string  ='123'
  @State param_build01:string  ='456'

  build() {
    Column({space:50}){
    //   引用传递第一种写法
    //   对象中有几个字面量，就必须传递几个
      Builder_function({param:this.param_build,param1:this.param_build01})

    //   引用传递第二种写法
      Builder_function01({param:this.param_build,param1:this.param_build01})

      Button(`点击改变`)
        .onClick(()=>{
          this.param_build = '111'
          this.param_build01 = '222'
        })
    }
    .height('100%')
    .width('100%')
  }
}

@Builder
function Builder_function(temp_param:temp_class01){
  Column(){
    Text(temp_param.param)
      .fontSize(20)
    Text(temp_param.param1)
      .fontSize(20)
  }
}

@Builder
function Builder_function01($$:temp_class02){
  Column(){
    Text(`${$$.param}`)
      .fontSize(20)
      .fontColor(Color.Red)
    Text(`${$$.param1}`)
      .fontSize(20)
      .fontColor(Color.Red)

  //   自定义组件
temp_component({str:$$.param})
  }

}

@Component
struct temp_component{
  // 接收传递过来的$$
  // 使用@Link装饰的状态变量接收，回报错
  @Prop str:string = ''
  build() {
    Column(){

      Text(this.str)
        .fontSize(20)
        .fontColor(Color.Yellow)
    }
  }
}