HarmonyOS鸿蒙Next中在if语法中，控制的这个图片，能进行单独控制图片的长宽吗？

HarmonyOS鸿蒙Next中在if语法中，控制的这个图片，能进行单独控制图片的长宽吗？ 如下是在一个if语句中，我想单独调两个图标的长宽，可以单独调整吗？

cke_137.png

[@Component](/user/Component)
struct todolist {

  totalTasks: Array<string> = ['早起','跑步','写作业','看报纸']
  [@State](/user/State) iscomplete:boolean=false
  [@Builder](/user/Builder) labeicon(icon:Resource){
    Image(icon)
      .width(30)
      .margin({left:10})
}
content? : string
  build() {
    Row() {
      if (this.iscomplete) {
        this.labeicon($r('app.media.yes'))
      }
      else {this.labeicon($r('app.media.no'))
      }

      Text(this.content)
        .fontSize(20)
        .padding({left:10,right:10})
        .opacity(this.iscomplete? 0.4:1)
        .decoration({
          type:this.iscomplete?TextDecorationType.LineThrough:TextDecorationType.None
        })
    }
    .backgroundColor(Color.White)
    .width(320)
    .height(60)
    .padding({left:20})
    .margin({bottom:20})
    .borderRadius(50)
    .borderStyle(BorderStyle.Dashed)
    .onClick( () => {
      this.iscomplete = !this.iscomplete
    } )
  }
}

更多关于HarmonyOS鸿蒙Next中在if语法中，控制的这个图片，能进行单独控制图片的长宽吗？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

可以的

修改自定义构建函数：

@Builder
labeicon(icon: Resource, width: number, height: number) {
  Image(icon)
    .width(width)
    .height(height)
    .margin({ left: 10 })
}

使用示例：

if (this.iscomplete) {
  this.labeicon($r('app.media.yes'),30,30)
} else {
  this.labeicon($r('app.media.no'),20,20)
}

更多关于HarmonyOS鸿蒙Next中在if语法中，控制的这个图片，能进行单独控制图片的长宽吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感谢大神解答🙏

两种方案可单独控制图片长和宽：第一种@Builder方法增加尺寸参数

@Builder labeicon(icon:Resource, width: number = 30, height: number = 30){
  Image(icon)
    .width(width)
    .height(height)
    .margin({left:10})
}

然后再用if语句差异调用

if (this.iscomplete) {
  this.labeicon($r('app.media.yes'), 35, 35) // 完成状态大图标
} else {
  this.labeicon($r('app.media.no'), 25, 25) // 未完成状态小图标
}

第二种直接在条件分支中设置尺寸属性：

if (this.iscomplete) {
  Image($r('app.media.yes'))
    .width(35).height(35)
    .margin({left:10})
} else {
  Image($r('app.media.no'))
    .width(25).height(25)
    .margin({left:10})
}

@Component
struct todolist {
  totalTasks: Array<string> = ['早起', '跑步', '写作业', '看报纸']
  @State iscomplete: boolean = false
  @Prop imageWidth: number = 30
  content?: string

  @Builder
  labeicon(icon: Resource) {
    Image(icon)
      .width(this.imageWidth)
      .margin({ left: 10 })
  }

  build() {
    Row() {
      if (this.iscomplete) {
        this.labeicon($r('app.media.yes'))
      } else {
        this.labeicon($r('app.media.no'))
      }

      Text(this.content)
        .fontSize(20)
        .padding({ left: 10, right: 10 })
        .opacity(this.iscomplete ? 0.4 : 1)
        .decoration({
          type: this.iscomplete ? TextDecorationType.LineThrough : TextDecorationType.None
        })
    }
    .backgroundColor(Color.White)
    .width(320)
    .height(60)
    .padding({ left: 20 })
    .margin({ bottom: 20 })
    .borderRadius(50)
    .borderStyle(BorderStyle.Dashed)
    .onClick(() => {
      this.iscomplete = !this.iscomplete
    })
  }
}

学习了🙏感谢回复！

在HarmonyOS鸿蒙Next中，if语法控制的图片可以通过属性方法单独设置长宽。使用组件的width()和height()方法直接指定像素值或百分比，例如：

if(condition){
  Image($r('app.media.img'))
    .width(100)
    .height(100)
}

支持资源单位vp或百分比字符串（如’50%’）。尺寸设置不受if语法影响，可独立控制。

在HarmonyOS Next中，可以在if语句中单独控制不同图片的长宽。从你的代码来看，你已经在使用@Builder构建了一个可复用的图片组件labeicon，这很好。要单独调整两个图标的长宽，可以这样修改：

  1. 修改labeicon构建器，增加width和height参数：
[@Builder](/user/Builder) labeicon(icon:Resource, width?: number, height?: number){
  Image(icon)
    .width(width || 30)  // 默认值30
    .height(height || 30) // 默认值30
    .margin({left:10})
}
  1. 在if-else中调用时传入不同的尺寸：
if (this.iscomplete) {
  this.labeicon($r('app.media.yes'), 40, 40)  // 设置完成图标尺寸
} else {
  this.labeicon($r('app.media.no'), 25, 25)   // 设置未完成图标尺寸
}

这样就可以单独控制两个不同状态下的图标尺寸了。

回到顶部