HarmonyOS 鸿蒙Next 如何在Button组件上添加icon（png图片图标）？

HarmonyOS 鸿蒙Next 如何在Button组件上添加icon（png图片图标）？ 看了官方的初级教程，也看了源码的ButtonInterface，似乎没有API，也暂时还没有看到是否有给一个Button组件上增加icon的图片，从资源库内获取图片的例子，搜了google和论坛的帖子也没有找到类似的案例。

所以发帖咨询，我是一个web前端开发，这种效果比较常见，但是不知道app的开发规范中是不是要尽量避免这种，所以没有人做，或者只能通过控制容器Row来模拟Button+Image的自定义按钮组件来实现呢？

想要的类似的效果，比如Web的UI框架很常见的


更多关于HarmonyOS 鸿蒙Next 如何在Button组件上添加icon（png图片图标）？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复 
Button(){
Row(){
Image('')
Text('')
}
}

更多关于HarmonyOS 鸿蒙Next 如何在Button组件上添加icon（png图片图标）？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


没想到还能这样操作。还限制在html的a标签不能套div的思维中。

顺便问问大佬，假设某个容器内部的所有子级Text（不限直接子级还是多级子级的关系），继承fontSize或者color之类的有办法实现吗。类似CSS继承下去，感觉现在要给所有子级都写一样的重复样式代码，好像不优雅，也不易维护、，

用@Style定义组件重用样式，

  • 字体大小为16px
  • 颜色为#333
  • 背景颜色为#fff
  • 内边距为10px
  • 边框为1px solid #ddd

我也想知道，

在HarmonyOS鸿蒙Next中，在Button组件上添加icon（png图片图标），可以使用Button组件的icon属性。具体步骤如下：

  1. 准备PNG图片资源：将PNG格式的图标文件放置在工程的resources/base/media目录下。

  2. 在XML布局文件中使用Button组件，并设置icon属性。示例代码如下：

<Button
    ohos:id="$+id:myButton"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:text="按钮"
    ohos:icon="$media:my_icon" />

其中，ohos:icon="$media:my_icon"中的my_icon是PNG图片文件的名称。

  1. 如果需要通过代码动态设置图标，可以使用Button的setIconElement方法。示例代码如下：
Button button = (Button) findComponentById(ResourceTable.Id_myButton);
button.setIconElement(MediaElement.createFromResource(ResourceTable.Media_my_icon));

通过以上步骤，即可在Button组件上添加PNG图片图标。

回到顶部