鸿蒙Next中button如何使用icon

在鸿蒙Next中，如何在Button组件上添加图标？需要导入特定的资源文件吗？有没有代码示例可以参考？图标的大小和位置该如何调整？

2 回复

在鸿蒙Next里，给Button加icon超简单！用Button组件，设置icon属性指向图片资源就行。比如：

<Button
    icon="$media:my_icon"
    text="点我"
    ... />

记得把my_icon.png放进resources/base/media/里。搞定！按钮瞬间变高级~

更多关于鸿蒙Next中button如何使用icon的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过Button组件的icon属性来设置图标。以下是具体使用方法：

1. 基本用法

import { Button } from '@kit.ArkUI';

@Entry
@Component
struct ButtonExample {
  build() {
    Column({ space: 10 }) {
      // 使用系统图标
      Button('图标按钮')
        .icon($r('app.media.ic_public_back'))
        .fontSize(20)
        .backgroundColor('#007DFF')

      // 使用网络图标
      Button('网络图标')
        .icon('https://example.com/icon.png')
        .fontSize(20)
    }
    .width('100%')
    .padding(20)
  }
}

2. 图标位置控制

使用iconPosition属性设置图标位置：

Button('左侧图标')
  .icon($r('app.media.icon'))
  .iconPosition(ButtonIconPosition.Start) // 图标在文字左侧

Button('右侧图标')
  .icon($r('app.media.icon'))
  .iconPosition(ButtonIconPosition.End) // 图标在文字右侧

3. 图标样式调整

Button('自定义图标')
  .icon($r('app.media.icon'))
  .iconSize({ width: 24, height: 24 })  // 设置图标尺寸
  .iconColor(Color.White)              // 设置图标颜色
  .fontSize(16)

关键属性说明：

  • icon: 设置图标资源路径（支持Resource、网络路径）
  • iconPosition: 图标位置（Start/End）
  • iconSize: 图标尺寸
  • iconColor: 图标颜色

注意事项：

  1. 图标建议使用.svg或.png格式
  2. 本地图标需要放在resources/base/media/目录下
  3. 网络图标需要申请网络权限

通过以上方式即可在鸿蒙Next中轻松实现带图标的按钮效果。

回到顶部