HarmonyOS开发之自定义构建函数

一、@Builder装饰器：自定义构建函数

UI元素复用机制@Builder，该自定义组件内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。

@Builder通过按引用传递的方式传入参数，才会触发动态渲染UI，并且参数只能是一个。
@Builder如果传入的参数是两个或两个以上，不会触发动态渲染UI。
@Builder传入的参数中同时包含按值传递和按引用传递两种方式，不会触发动态渲染UI。
@Builder的参数必须按照对象字面量的形式，把所需要的属性一一传入，才会触发动态渲染UI。

1.按引用传递参数

按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder方法内的UI刷新。如果在@Builder方法内调用自定义组件，ArkUI提供$$作为按引用传递

class Tmp {
  paramA1: string = ''
}
//定义一个自定义函数 并且接收参数
//不要理解这个$$什么意思 官方给的，就按照这么使用就好了
@Builder function overBuilder($$: Tmp) {
  Row() {
    Column() {
      Text(`overBuilder===${$$.paramA1}`)
      //将接收的参数 再传给自定义组件
      HelloComponent({message: $$.paramA1})
    }
  }
}

@Component
struct HelloComponent {
//自定义子组件通过 @Prop接受参数 并展示
  @Prop message: string;

  build() {
    Row() {
      Text(`HelloComponent===${this.message}`)
    }
  }
}

@Entry
@Component
struct Parent {
  @State label: string = 'Hello';
  build() {
    Column() {
    //调用 overBuilder 自定义函数，并且往overBuilder传参
      overBuilder({paramA1: this.label})
      Button('Click me').onClick(() => {
        this.label = 'ArkUI';
      })
    }
  }
}

2.按值传递参数

用@Builder装饰的函数默认按值传递。当传递的参数为状态变量时，状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候，推荐使用按引用传递。除非只做展示，改变不会引起变化可使用按值传递参数

@Builder function overBuilder(paramA1: string) {
  Row() {
    Text(`UseStateVarByValue: ${paramA1} `)
  }
}
@Entry
@Component
struct Parent {
  @State label: string = 'Hello';
  build() {
    Column() {
      overBuilder(this.label)
      Button('add')
        .onClick(()=>{
        //label值改变 但是自定义函数中Text不会发生改变
          this.label ='word'
        })
    }
  }
}