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

发布于 1周前 作者 itying888 来自 鸿蒙OS

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

Harmonyos Next教程
2 回复
可以试一下这个demo：
深色代码主题
复制
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State re: Resource=$r('app.media.new0')

build() {
Column() {


  <span class="hljs-title class_">Image</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">re</span>)
    .<span class="hljs-title function_">width</span>(<span class="hljs-number">100</span>)
    .<span class="hljs-title function_">height</span>(<span class="hljs-number">100</span>)
    .<span class="hljs-title function_">draggable</span>(<span class="hljs-literal">false</span>)
    .<span class="hljs-title function_">onTouch</span>(<span class="hljs-function">(<span class="hljs-params">e</span>)=&gt;</span>{
      <span class="hljs-keyword">if</span> (e.<span class="hljs-property">type</span> === <span class="hljs-title class_">TouchType</span>.<span class="hljs-property">Down</span>) {
        <span class="hljs-variable language_">this</span>.<span class="hljs-property">re</span>=$r(<span class="hljs-string">'app.media.new5'</span>)
      }
      <span class="hljs-keyword">if</span> (e.<span class="hljs-property">type</span>===<span class="hljs-title class_">TouchType</span>.<span class="hljs-property">Up</span>) {
        <span class="hljs-variable language_">this</span>.<span class="hljs-property">re</span>=$r(<span class="hljs-string">'app.media.new0'</span>)
      }
    })

}
.<span class="hljs-title function_">justifyContent</span>(<span class="hljs-title class_">FlexAlign</span>.<span class="hljs-property">Center</span>)
.<span class="hljs-title function_">height</span>(<span class="hljs-string">'100%'</span>)
.<span class="hljs-title function_">width</span>(<span class="hljs-string">'100%'</span>)

}
}

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


在 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

回到顶部