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%')

  }
}
1
2
3
4
5
6
7
8
9
10
11

定义具体实现

我们定义了三个@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)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

@BuilderParam初始化

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

  build() {
    Row() {
      //初始化@BuilderParam showMessage
      Pattern({showMessage:this.showMessageLineThrough})
      Pattern({showMessage:this.showMessageUnderline})
      Pattern({showMessage:this.showMessageOverline})
    }.alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.SpaceAround)
    .height('100%')
    .width('100%')
  }
1
2
3
4
5
6
7
8
9
10
11

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%')

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

参考资料

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