HarmonyOS 鸿蒙Next：arkts语言，三个image组件，点击一个image时只变当前image，其他两个image图片不变如何实现

HarmonyOS 鸿蒙Next：arkts语言，三个image组件，点击一个image时只变当前image，其他两个image图片不变如何实现

这段代码,三个image组件,点击一个image的时候只变当前 image,其他两个image的图片不变,但是现在的效果是!点击image的时候,三个image的图片都会同步改变!

@Entry@Componentstruct Section_10 {
  @State num: number = 1
  @Builder itemRank(item:string){
    if (this.num == 1) {
      Row() {
        Text(item)
        Image($r('app.media.quotation_list_icon_rank_nor')).width(20).height(20)
      }.onClick(() => {
        this.num += 1
      })
    }
    else if (this.num == 2) {
      Row() {
        Text(item)
        Image($r('app.media.quotation_list_icon_rank_down')).width(20).height(20)
      }.onClick(() => {
        this.num += 1
      })
    }
    else if (this.num == 3) {
      Row() {
        Text(item)
        Image($r('app.media.quotation_list_icon_rank_up')).width(20).height(20)
      }.onClick(() => {
        this.num = 1
      })
    }
  }
  build() {
    Row() {
      this.itemRank("小")
      this.itemRank("飞")
      this.itemRank("人")
    }
  }
}


更多关于HarmonyOS 鸿蒙Next：arkts语言，三个image组件，点击一个image时只变当前image，其他两个image图片不变如何实现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复 
@Entry
@Componentstruct Section_10 {
  @State num1: number = 0
  @State num2: number = 0
  @State num3: number = 0
  private imgArray:Resource[]=[
    $r('app.media.icon'),
    $r('app.media.ic_public_add'),
    $r('app.media.ic_public_remove')
  ]
  @Builder itemRank(item:string,n:number){
    if (n==1){
      Row() {
        Text(item)
        Image(this.imgArray[this.num1%3])
          .width(20)
          .height(20)
      }
      .onClick(() => {
        this.num1++
      })
    }
    else if (n==2){
      Row() {
        Text(item)
        Image(this.imgArray[this.num2%3])
          .width(20)
          .height(20)
      }
      .onClick(() => {
        this.num2++
      })
    }
    else if (n==3){
      Row() {
        Text(item)
        Image(this.imgArray[this.num3%3])
          .width(20)
          .height(20)
      }
      .onClick(() => {
        this.num3++
      })
    }
  }
  build() {
    Row() {
      this.itemRank("小",1)
      this.itemRank("飞",2)
      this.itemRank("人",3)
    }
  }
}

更多关于HarmonyOS 鸿蒙Next：arkts语言，三个image组件，点击一个image时只变当前image，其他两个image图片不变如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


成了,感谢🙏感谢🙏!!!

在HarmonyOS鸿蒙Next的ArkTS语言中，要实现点击一个Image组件时只改变当前Image的图片，而其他两个Image保持不变，可以通过以下步骤实现：

  1. 定义状态变量：为每个Image组件定义一个状态变量，用于控制其图片资源。例如，使用@State装饰器来声明三个状态变量image1Src、image2Src和image3Src。

  2. 绑定点击事件：为每个Image组件绑定一个点击事件，当点击某个Image时，更新对应的状态变量，从而改变该Image的图片。

  3. 更新图片资源：在点击事件的处理函数中，根据点击的Image，更新相应的状态变量为新的图片资源。

示例代码如下：

@Entry
@Component
struct ImageExample {
  @State image1Src: Resource = $r('app.media.image1');
  @State image2Src: Resource = $r('app.media.image2');
  @State image3Src: Resource = $r('app.media.image3');

  build() {
    Column() {
      Image(this.image1Src)
        .onClick(() => {
          this.image1Src = $r('app.media.new_image1');
        })
      Image(this.image2Src)
        .onClick(() => {
          this.image2Src = $r('app.media.new_image2');
        })
      Image(this.image3Src)
        .onClick(() => {
          this.image3Src = $r('app.media.new_image3');
        })
    }
  }
}

在这个例子中，每个Image组件都有自己的状态变量image1Src、image2Src和image3Src，并通过onClick事件来更新各自的图片资源。点击某个Image时，只有该Image的图片会发生变化，其他两个Image的图片保持不变。

回到顶部