鸿蒙Harmony Os中的@Builder装饰器实现点击切换图片效果

@Builder装饰器可以将重复使用的UI元素抽象成一个方法，并在 build 方法中进行调用。为什么要用@Builder装饰器呢？当然是为了让代码更”优雅"。

废话不说，我们先来看看实现小案例的效果。（原谅的图上带水印，因为没钱充会员.........）。效果如下图所示，我们点击文本，文本前面的图片更改。

首先，我们要先准备两张图片，并把它放在项目的resource/media目录下。

其次，我们定义一个变量change，它是一个布尔类型，当它为true时，显示Plan.png，当它的值为false时，显示Colck.png。

再定义一个@Builder装饰器，这个装饰器的参数是icon，即我们要改变的两个图片。

代码如下：

  //定义一个boolean变量，当boolean变量为false的时候，显示计划icon,当boolean变量为true的时候，显示打卡icon
  @State change : boolean = false

  //定义一个Builder
  @Builder get_icon(icon : Resource){ //这里需要改变的是icon，因此这里传参为icon
    Image(icon)
      .width(80)
      .height(80)
      .margin({right:20})
      .objectFit(ImageFit.Contain)  //设置icon的布局样式
  }

最后，再build()中，我们只需要调用get_icon，并把相应的图片路径传进去就行。

代码如下：

      //这里为调用上面的装饰器
      if (this.change){
        this.get_icon($r('app.media.Clock'))
      }
      else {
        this.get_icon($r('app.media.Plan'))
      }

如果不适用装饰器，我们就需要在build()中写两次Image()...，显得代码非常的冗余。

以下是全部代码：

@Entry
@Component

struct mytest{
  //定义一个boolean变量，当boolean变量为false的时候，显示计划icon,当boolean变量为true的时候，显示打卡icon
  @State change : boolean = false

  //定义一个Builder
  @Builder get_icon(icon : Resource){ //这里需要改变的是icon，因此这里传参为icon
    Image(icon)
      .width(80)
      .height(80)
      .margin({right:20})
      .objectFit(ImageFit.Contain)  //设置icon的布局样式
  }

  build(){
    Row(){

      //这里为调用上面的装饰器
      if (this.change){
        this.get_icon($r('app.media.Clock'))
      }
      else {
        this.get_icon($r('app.media.Plan'))
      }

      Text(`${this.change}`)
        .fontSize(20)
        .fontColor(Color.Grey)
        .fontWeight(4)
        .onClick(()=>{
          if (this.change){
            this.change = false
          }else {
            this.change = true
          }
        })
    }
    .width('80%')
    .justifyContent(FlexAlign.Center)
    .height(100)
    .borderRadius(12)
    .margin({top:50})
  }
}