学习笔记（四十二）：自定义组件@BuilderParam装饰器

概述：

该装饰器用于声明任意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('这是内容')
  }
}

 

效果图: