学习笔记（四十二）：自定义组件@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('这是内容')}
}

 

效果图: