HarmonyOS 鸿蒙Next Image 组件按压状态和正常状态显示不同图片如何实现，给个 Demo

使用多态样式，没法实现

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-polymorphic-style-V5

Image 动态切换数据源的 API 也没有给出来。

更多关于HarmonyOS 鸿蒙Next Image 组件按压状态和正常状态显示不同图片如何实现，给个 Demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 1楼•2 个月前

可以试一下这个demo：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State re: Resource=$r('app.media.new0')

  build() {
    Column() {

      Image(this.re)
        .width(100)
        .height(100)
        .draggable(false)
        .onTouch((e)=>{
          if (e.type === TouchType.Down) {
            this.re=$r('app.media.new5')
          }
          if (e.type===TouchType.Up) {
            this.re=$r('app.media.new0')
          }
        })

    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next Image 组件按压状态和正常状态显示不同图片如何实现，给个 Demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 2楼•2 个月前

在 HarmonyOS 鸿蒙系统中，可以通过使用 XML 布局文件和 JS 代码来实现 Next Image 组件按压状态和正常状态显示不同图片。以下是一个 Demo 示例：

1. 在 resources/base/element 目录下创建布局文件 index.hml：

<div>
  <image
    id="imageElement"
    src="/common/normal_image.png"
    @touchstart="onTouchStart"
    @touchend="onTouchEnd"
    style="width: 100px; height: 100px;"
  />
</div>

2. 在 pages/index/index.js 文件中编写逻辑：

export default {
  data: {
    isPressed: false,
  },
  onTouchStart() {
    this.isPressed = true;
    this.$element('imageElement').setAttribute('src', '/common/pressed_image.png');
  },
  onTouchEnd() {
    this.isPressed = false;
    this.$element('imageElement').setAttribute('src', '/common/normal_image.png');
  },
};

3. 在 resources/common 目录下放置 normal_image.png 和 pressed_image.png。

以上代码在触摸开始时将图片切换到按压状态的图片，在触摸结束时切换回正常状态的图片。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html