學習筆記（四十二）：自定義元件@BuilderParam裝飾器

听着music睡發表於2024-11-22
筆記元件UI

概述：

該裝飾器用於宣告任意UI描述的一個元素，類似slot佔位符。

使用示例：

1、初始化@BuilderParam裝飾的方法

// 自定義元件
@Component
export struct CommonView{
  @Builder customBuilder() {}; // 當前元件
  @BuilderParam customBuilderParam: () => void = this.customBuilder;   // @BuilderParam裝飾的方法只能被自定義構建函式（@Builder裝飾的方法）初始化

  build() {
    Column(){
      Text('標題')
      this.customBuilderParam() // 類似slot佔位符，外部使用該自定義元件的時候動態傳一個自定義構建函式
    }.width('100%')
  }
}

2、用父元件自定義構建函式初始化子元件@BuilderParam裝飾的方法
@Entry
@Component
export struct Main{
  build() {
    Column(){
      CommonView({customBuilderParam:this.slotView})
    }.height('100%').width('100%')
  }

  @Builder slotView(){
    Text('這是內容')
  }
}

效果圖:

3、若外部使用該元件無傳入 @BuilderParam裝飾的方法 ，則使用預設的@builder內容

// 自定義元件
@Component
export struct CommonView{
  @Builder customBuilder() {
    Text('預設內容')   // 預設ui
  };
  @BuilderParam customBuilderParam: () => void = this.customBuilder;

  build() {
    Column(){
      Text('標題')
      this.customBuilderParam()
    }.width('100%')
  }
}


// 使用頁面
@Component
export struct Main{
  build() {
    Column(){
      CommonView() // 使用自定義元件但沒有傳入customBuilderParam，則使用自定義元件預設ui
    }.height('100%').width('100%')
  }

  @Builder slotView(){
    Text('這是內容')
  }
}

效果圖:

相關文章