HarmonyOS鸿蒙Next中如何修改Image（本地图标资源）的颜色？能动态修改吗？

HarmonyOS鸿蒙Next中如何修改Image（本地图标资源）的颜色？能动态修改吗？

4 回复

能！

对于svg，可以用fileColor,设置填充颜色，设置后填充颜色会覆盖在图片上。

Image($r('app.media.ic_back'))
  .fillColor(Color.Red)

对于png图片进行修改颜色，可以使用colorFilter。

import { common2D, drawing } from '@kit.ArkGraphics2D';

private color: common2D.Color = {
  alpha: 255,
  red: 255,
  green: 0,
  blue: 0
};

Image($r('app.media.ic_public_back'))
  .colorFilter(drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN))

更多关于HarmonyOS鸿蒙Next中如何修改Image（本地图标资源）的颜色？能动态修改吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


修改背景颜色？或者是用SVG

在HarmonyOS Next中，可以通过修改Image组件的tintColor属性来改变本地图标颜色。使用ArkTS代码如下：

Image($r('app.media.icon'))
  .tintColor(Color.Red)

动态修改可通过状态变量实现：

@State color: Color = Color.Blue

Image($r('app.media.icon'))
  .tintColor(this.color)

// 修改值
this.color = Color.Green

tintColor支持所有Color类型定义，包括HEX、RGB等格式。

在HarmonyOS Next中，可以通过以下方式修改本地图标资源的颜色并实现动态修改：

  1. 使用tint属性：
<Image
    src="$media:icon"
    tint="#FF0000" <!-- 设置颜色值 -->
/>
  1. 动态修改颜色：
// 通过id获取Image组件
const image = this.$element('imageId') as ImageComponent;

// 动态修改颜色
image.tint = Color.Red; // 使用预定义颜色
image.tint = '#00FF00'; // 使用16进制颜色值
  1. 使用资源文件定义颜色：
// 在资源文件中定义颜色
"color": {
    "icon_color": "#FF5722"
}

// 代码中引用
image.tint = $r('app.color.icon_color');

注意事项：

  • 此方法适用于SVG等矢量图标资源
  • 对于位图资源(PNG/JPG)，tint效果可能不理想
  • 动态修改会触发UI重新渲染，
回到顶部