HarmonyOS(43) @BuilderParam标签使用指南

@BuilderParam

该标签有的作用有点类似于设计模式中的模板模式，类似于指定一个UI占位符，具体的实现交给具体的@Builder，顾名思义，可以看出@BuilderParam是以@Builder作为参数来使用的。这么说有点让人莫名其妙，通过例子来具体说明。

使用举例

定义模板

如下代码所示，定义一个显示文本文件的@BuilderParam showMessage方法，具体展示这个message的样式让客户端来定义。

@Component
struct Pattern{@BuilderParam showMessage:(txt:string) => void;build() {Column(){//直接传参this.showMessage("Hello HarmonyOS")}.width('30%')}
}

定义具体实现

我们定义了三个@Builder方法，分别是showMessageLineThrough、showMessageUnderline、showMessageUnderline，分别展示如下图样式的Text

  //横线从中字体中间穿过，字体设置为红色@Builder showMessageLineThrough(txt:string){Text() {Span(txt).fontSize(16).fontColor(Color.Red).decoration({ type: TextDecorationType.LineThrough, color: Color.Red })}.borderWidth(1).padding(10)}//下划线，字体为斜体，颜色为蓝色@Builder showMessageUnderline(txt:string){Text() {Span(txt).fontColor(Color.Blue).fontSize(16).fontStyle(FontStyle.Italic).decoration({ type: TextDecorationType.Underline, color: Color.Black })}.borderWidth(1).padding(10)}//上划线，字体为绿色@Builder showMessageOverline(txt:string){Text() {Span(txt).fontSize(16).fontColor(Color.Green).decoration({ type: TextDecorationType.Overline, color: Color.Green })}.borderWidth(1).padding(10)}
}

@BuilderParam初始化

前面两部构建了@BuilderParam和对应的@Builder，他们的使用方式如下代码所示：可以看出@BuilderParam是以@Builder作为参数来使用的。

  build() {Row() {//初始化@BuilderParam showMessagePattern({showMessage:this.showMessageLineThrough})Pattern({showMessage:this.showMessageUnderline})Pattern({showMessage:this.showMessageOverline})}.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.SpaceAround).height('100%').width('100%')}

demo源码

@Entry
@Component
struct Index {build() {Row() {Pattern({showMessage:this.showMessageLineThrough})Pattern({showMessage:this.showMessageUnderline})Pattern({showMessage:this.showMessageOverline})}.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.SpaceAround).height('100%').width('100%')}@Builder showMessageLineThrough(txt:string){Text() {Span(txt).fontSize(16).fontColor(Color.Red).decoration({ type: TextDecorationType.LineThrough, color: Color.Red })}.borderWidth(1).padding(10)}@Builder showMessageUnderline(txt:string){Text() {Span(txt).fontColor(Color.Blue).fontSize(16).fontStyle(FontStyle.Italic).decoration({ type: TextDecorationType.Underline, color: Color.Black })}.borderWidth(1).padding(10)}@Builder showMessageOverline(txt:string){Text() {Span(txt).fontSize(16).fontColor(Color.Green).decoration({ type: TextDecorationType.Overline, color: Color.Green })}.borderWidth(1).padding(10)}
}
@Component
struct Pattern{@BuilderParam showMessage:(txt:string) => void;build() {Column(){this.showMessage("Hello HarmonyOS")}.width('30%')}
}

参考资料

@BuilderParam装饰器：引用@Builder函数
线性布局（Row/Column）
设计模式之模版模式