HormonyOs~@builder自定义函数

@builder用法分为两种  一种是全局 一种是局部  官方推荐使用局部 因为全局不确定是否有那个状态

先看段代码

@Entry
@Component
struct Bulider {
  build() {
    Row() {
      Column(){

        Text('用户名')
            .id('HelloWorld')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .width(200)
            .height(50)
            .backgroundColor(Color.Blue)
          .margin(20)
        Text('密码')
          .id('HelloWorld')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .width(200)
          .height(50)
          .backgroundColor(Color.Blue)
          .margin(20)
        
      }
      .height('50%')
      .width('100%')


    }
    .height('100%')

  }

}

在上段代码中可以看到 使用了两个Text组件  其中他们的样式还都是一样的  如果有多个的话就容易造成代码的冗余  那这种情况就用到了我们的@builder函数 

首先

1.看下局部@Builder

@Entry
@Component
struct Bulider {
  @State message: string = 'Hello';

  build() {
    Row() {
      Column(){
        this.textLable('用户名')
        this.textLable('密码')
      }
      .height('50%')
      .width('100%')

    }
    .height('100%')

  }
  @Builder
  textLable(message:string){
    Text(message)
      .id('HelloWorld')
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .width(200)
      .height(50)
      .backgroundColor(Color.Blue)
      .margin(20)
      .onClick(()=>{
        console.log(this.message)
      })
  }
}

我们先封装一个textLable方法  然后用@builder装饰器 告知他是一个自定义函数  然后因为他是在组件内部定义的  所以调用的时候 直接用this.textLable方法调用就可以  此处我是用了传参的方式 减少了代码的冗余  

第二种方式  全局@Builder

@Entry
@Component
struct Bulider {
  @State message: string = 'Hello';

  build() {
    Row() {
      Column(){
    textLable('用户名')
textLable('密码')
      }
      .height('50%')
      .width('100%')

    }
    .height('100%')

  }

}
@Builder
function textLable(message:string){
  Text(message)
    .id('HelloWorld')
    .fontSize(50)
    .fontWeight(FontWeight.Bold)
    .width(200)
    .height(50)
    .backgroundColor(Color.Blue)
    .margin(20)
    .onClick(()=>{
      // console.log(this.message)
    })
}

可以看到第二种方式他是把textLable方法挪到了组件外部 并且加了function 这种方法的调用就是直接调用传参就行 无须使用this来调用  目前同时在onClick方法里打印this也会导致编译错误  所以在全局@Builder里尽量避免this的使用

若是使用@Builder装饰器  点击按钮时  想要@State的定义的状态发生变化  怎么操作呢  两种方式

第一种代码

class Tmp {
  paramA1: string = ''
}

@Builder
function Lable(params: Tmp){
  Text(`${params.paramA1}`)
    .id('HelloWorld')
    .fontSize(50)
    .fontWeight(FontWeight.Bold)
    .width(200)
    .height(50)
    .backgroundColor(Color.Blue)
    .margin(20)
    .onClick(()=>{
      // console.log(this.message)

    })
}
@Entry
@Component
struct B1_builder_param {
  @State message: string = 'Hello';

  build() {
    Row() {
      Column(){
        Lable({ paramA1: this.message })
        Button('点击').onClick(()=>{
          console.log(this.message,'this.message')
          this.message='helloioioio'

        })

        // Lable('密码')
      }

      .height('50%')
      .width('100%')

    }
    .height('100%')



  }


}

这样点击按钮的时候文字就发生变化了   当然还有一种方法用$$

class Tmp {
  paramA1: string = ''
}

@Builder
function Lable($$: Tmp){
  Text($$.paramA1)
    .id('HelloWorld')
    .fontSize(50)
    .fontWeight(FontWeight.Bold)
    .width(200)
    .height(50)
    .backgroundColor(Color.Blue)
    .margin(20)
    .onClick(()=>{
      // console.log(this.message)

    })
}
@Entry
@Component
struct B1_builder_param {
  @State message: string = 'Hello';

  build() {
    Row() {
      Column(){
        Lable({ paramA1: this.message })
        Button('点击').onClick(()=>{
          console.log(this.message,'this.message')
          this.message='helloioioio'

        })

        // Lable('密码')
      }

      .height('50%')
      .width('100%')

    }
    .height('100%')



  }

}

这两种方式都可以

当然了  多参数也是可以的哈

class Tmp {
  paramA1: string = ''
  msg:string=''
}

@Builder
function Lable($$: Tmp){
  Text($$.paramA1+$$.msg)
    .id('HelloWorld')
    .fontSize(50)
    .fontWeight(FontWeight.Bold)
    .width(200)
    .height(50)
    .backgroundColor(Color.Blue)
    .margin(20)
    .onClick(()=>{
      // console.log(this.message)

    })
}
@Entry
@Component
struct B1_builder_param {
  @State message: string = 'Hello';

  build() {
    Row() {
      Column(){
        Lable({ paramA1: '用户名',msg:this.message })
        Button('点击').onClick(()=>{
          console.log(this.message,'this.message')
          this.message='helloioioio'

        })

        // Lable('密码')
      }

      .height('50%')
      .width('100%')

    }
    .height('100%')



  }


}