输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQ应用框架开发UI框架组件使用如何对PNG图标进行着色

如何对PNG图标进行着色

更新时间: 2026-06-26 07:47
本文导读

问题现象

如何对PNG图标进行着色，仅更改图标内容部分的颜色，空白部分保持不变？

效果预览

背景知识

colorBlend：为组件添加颜色叠加效果。colorBlend属性会将指定的颜色与图像原始像素进行叠加混合，仅作用于非透明区域。透明区域因alpha通道值为0，不会参与混合计算。

解决方案

采用colorBlend属性结合Image组件的声明式语法实现。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Page {
  4.   build() {
  5.     Column({ space: 20 }) {
  6.       Row({ space: 20 }) {
  7.         Text('修改过图标');
  8.         Image($r('app.media.startIcon'))
  9.           .colorBlend(Color.Red)
  10.           .height(50)
  11.           .width(50);
  12.       };
  13. 

  14.       Row({ space: 20 }) {
  15.         Text('原始的图标');
  16.         Image($r('app.media.startIcon'))
  17.           .height(50)
  18.           .width(50);
  19.       };
  20.     }
  21.     .justifyContent(FlexAlign.Center)
  22.     .height('100%')
  23.     .width('100%');
  24.   }
  25. }

常见FAQ

Q：使用colorBlend更改颜色，背景由透明变为白色。

A：colorBlend为颜色叠加，不支持仅设置非透明通道颜色，可以采用colorFilter进行替代。

如何通过拖拽拉起半模态弹窗
如何实现类似雷达扫描的效果
相关推荐
文档如何让半透明颜色绘制时不进行叠加
文档Text组件设置opacity后，文字颜色在整体透明度基础上叠加了一个透明，应该如何处理
文档PNG图片透明像素转白色
文档如何给图片添加底色
文档色彩
文档DrawingRenderingContext绘制图像图形如何填充
文档Button组件背景色设置
文档通过colorFilter和颜色矩阵修改Image的颜色
文档Button组件如何设置渐变背景色
文档如何设置PC窗口透明
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词