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

发布于:2024-07-11 ⋅ 阅读:(18) ⋅ 点赞:(0)

@BuilderParam

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

使用举例

定义模板

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


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

  }
}

定义具体实现

我们定义了三个@Builder方法,分别是showMessageLineThroughshowMessageUnderlineshowMessageUnderline,分别展示如下图样式的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 showMessage
      Pattern({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)
设计模式之模版模式


网站公告

今日签到

点亮在社区的每一天
去签到