Builder-公用组建封装和 按引用传递 改变数据

 

@Entry
@Component
struct BuilderPage {

  // 组建内的
  @Builder compButtonBuilder(icon:Resource,text:string,callback:()=>void){
    Button() {
      Row({ space: 10 }) {
        Image(icon)
          .width(25)
          .height(25)
        Text(text)
          .fontColor(Color.White)
          .fontSize(25)
      }
    }.width(120)
    .height(50)
    .onClick(callback)
  }

  build() {
    Column() {
      Row({ space: 50 }) {

        // Button() {
        //   Row({ space: 10 }) {
        //     Image($r('app.media.icon_edit'))
        //       .width(25)
        //       .height(25)
        //     Text('编辑')
        //       .fontColor(Color.White)
        //       .fontSize(25)
        //   }
        // }.width(120)
        // .height(50)
        // .onClick(() => console.log('编辑'))

        // this.compButtonBuilder($r('app.media.icon_edit'),'编辑',() => console.log('编辑'))
        globalButtonBuilder($r('app.media.icon_edit'),'编辑',() => console.log('编辑'))

        // Button() {
        //   Row({ space: 10 }) {
        //     Image($r('app.media.icon_send'))
        //       .width(25)
        //       .height(25)
        //     Text('发送')
        //       .fontColor(Color.White)
        //       .fontSize(25)
        //   }
        // }.width(120)
        // .height(50)
        // .onClick(() => console.log('发送'))

        // this.compButtonBuilder($r('app.media.icon_send'),'发送',() => console.log('发送'))
        globalButtonBuilder($r('app.media.icon_send'),'发送',() => console.log('发送'))

      }
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}


// 组建内的
@Builder export function globalButtonBuilder(icon:Resource,text:string,callback:()=>void){
  Button() {
    Row({ space: 10 }) {
      Image(icon)
        .width(25)
        .height(25)
      Text(text)
        .fontColor(Color.White)
        .fontSize(25)
    }
  }.width(120)
  .height(50)
  .onClick(callback)
}


demo2 

@Entry
@Component
struct BuilderParameterPage {
  @State count: number = 0;

  build() {
    Column({ space: 50 }) {
      //按值传递
      valueTextBuilder(this.count)
      //按引用传递
      referenceTextBuilder({ count: this.count })
      Row({ space: 50 }) {
        Button('-1').onClick(() => {
          this.count--;
        })
        Button('+1').onClick(() => {
          this.count++;
        })
      }
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Builder function valueTextBuilder(count: number) {
  Text(`按值传递: ${count}`)
    .fontSize(30)
    .fontWeight(FontWeight.Bold)
}

@Builder function referenceTextBuilder(obj: { count: number }) {
  Text(`按引用传递: ${obj.count}`)
    .fontSize(30)
    .fontWeight(FontWeight.Bold)
}