HarmonyOS 鸿蒙Next 图片按钮如何便捷实现不同状态下显示不同的图片素材

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

HarmonyOS 鸿蒙Next 图片按钮如何便捷实现不同状态下显示不同的图片素材

图片按钮如何便捷实现不同状态下显示不同的图片素材

Harmonyos Next教程
2 回复

可以尝试使用stateStyle设置按钮的背景图

  Button({type:ButtonType.Normal}){

          }

          .stateStyles({

            pressed:{

              .backgroundImage($r('app.media.11'))

            },

            normal:{

              .backgroundImage($r('app.media.app_icon'))

            }
			```

更多关于HarmonyOS 鸿蒙Next 图片按钮如何便捷实现不同状态下显示不同的图片素材的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现图片按钮在不同状态下显示不同的图片素材，可以通过XML布局文件和JavaScript逻辑代码协同完成。

  1. XML布局文件： 定义图片按钮，并通过ohos:src属性设置默认图片。利用ohos:id属性为图片按钮分配一个唯一的ID。

    <ImageButton
    ohos:id="$+id:my_image_button"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:src="$media:default_image"
    ohos:clickable="true"/>

  2. JavaScript逻辑代码： 在页面的onInit或相关事件中，通过ID获取图片按钮的引用，并根据不同状态设置不同的图片。

    export default {
    onInit() {
        this.$element('my_image_button').on('click', () => {
            let button = this.$element('my_image_button');
            if (/* 判断当前状态 */) {
                button.setSrc('$media:image1');
            } else {
                button.setSrc('$media:image2');
            }
        });
    }
}

    其中，/* 判断当前状态 */部分根据实际业务需求填写逻辑判断。

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

回到顶部