背景

這是一個基礎(chǔ)概念，其實(shí)沒有什么原因，練習(xí)過程中，自然可以感受到其用法，后期加上真實(shí)項目的演練，會形成習(xí)慣

功能核心理念

“在自定義組件中添加一個點(diǎn)擊跳轉(zhuǎn)操作。若直接在組件內(nèi)嵌入事件方法，將會導(dǎo)致所有引入該自定義組件的地方均增加了該功能。為解決此問題，ArkUI引入了@BuilderParam裝飾器”

這樣的場景在任何平臺任何公司都會遇到，是否采用在公共組件中定義某個功能還是在外部定義某個功能，都是取決于實(shí)際業(yè)務(wù)場景發(fā)生的概率。

@BuilderParam 要告知是：HarmonyOS有應(yīng)對這樣的機(jī)制
|

核心代碼

@Entry
@Component
struct BuilderParam2Index {
  label: string = 'Parent'

  @Builder GlobalBuilder1($$: { label: string }) {
    Text(`${this.label}`).fontColor(Color.White)

    Text($$.label)
      .fontColor(Color.White)
      .width('100%')
      .height(50)
      .backgroundColor(Color.Green)
  }

  build() {
    Column({ space: 30 }) {

      //一. 通過參數(shù)初始化組件
      BuilderParamChild2({ aBuilder1: this.GlobalBuilder1 })

      BuilderParamChild2({ label: 'Child', aBuilder1: this.GlobalBuilder1 })

      //二. 通過尾隨閉包初始化組件, 如果組件中包含兩個及以上@BuilderParam函數(shù)，則無法使用此種初始化方式
      BuilderParamChild2(){}

      BuilderParamChild2({ label: 'Child' }) {}

      BuilderParamChild2({ label: 'Child' }) {
        this.GlobalBuilder1({ label: 'global Builder label2' })
      }

      BuilderParamChild2({ label: 'Child' }) {
        Text('自定義初始化文字').fontColor(Color.Orange)
      }

    }
    .width('100%')
    .height('100%')
    .padding({ top: px2vp(111) })
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}


@Component
struct BuilderParamChild2 {
   label: string = "Child"
  // 有參數(shù)類型，指向的GlobalBuilder1也是有參數(shù)類型的方法
  @BuilderParam aBuilder1: ($$: { label: string }) = > void;

  build() {
    Column() {

      Text('BuilderParamChild').fontColor(Color.Red)
  
      this.aBuilder1({ label: 'global Builder label' })

    }.width('100%').backgroundColor(Color.Green)
  }
}

審核編輯 黃宇