@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})
}
}