文章目录前言什么是 Symbol 图标代码实现着色与多色核心代码完整示例动效让图标活起来代码解析与传统 Image/字体图标对比常见误区小白必踩完整可运行示例SymbolGlyph 矢量图标实现拆解写在最后前言以前用图标要么是 PNG放大就糊要么是字体图标颜色单一。HarmonyOS7 推了SymbolGlyph——矢量 可着色 可变形态的新一代图标。它能随主题变色、能整体旋转缩放、还能做动效。这篇文章带你认识 SymbolGlyph从引用到着色到动效把常用玩法讲透。什么是 Symbol 图标Symbol 是系统内置的矢量图标库好处矢量无限放大不糊。可着色一个图标能变成任意颜色不用准备多套图。可变体部分图标支持不同渲染策略如双色、分层。代码实现SymbolGlyph($r(sys.symbol.heart))// 引用系统 Symbol 图标.fontSize(32).fontColor([#FF4500])// 随意着色$r(sys.symbol.xxx)引用系统 Symbol 资源如heart、star、trash。.fontSize/.fontColor像文字一样调大小和颜色比 PNG 灵活十倍。着色与多色单个颜色核心代码SymbolGlyph($r(sys.symbol.star)).fontSize(28).fontColor([#FFD700])// 金色星星部分 Symbol 支持多色传入颜色数组对应不同图层完整示例SymbolGlyph($r(sys.symbol.wifi)).fontColor([#4A90E2,#CCCCCC])// 不同图层不同色动效让图标活起来Symbol 支持symbolEffect做交互动效比如点击时弹一下代码解析Localactive:booleanfalseSymbolGlyph($r(sys.symbol.heart)).fontSize(32).fontColor([this.active?#FF4500:#999999]).symbolEffect(newSymbolEffect(),this.active)// 状态变化时触发效果.onClick((){this.active!this.active})symbolEffect(effect, isActive)第二个布尔控制效果是否激活。配合active状态点赞时图标变色 触发微动效体验很原生。与传统 Image/字体图标对比维度PNG 图标字体图标SymbolGlyph清晰度放大模糊清晰清晰矢量着色多套图单色任意多色动效难难原生支持来源自备自备/图标库系统内置结论新项目优先 SymbolGlyph省去管理图标资源的麻烦还能一键换色做动效。常见误区小白必踩误区说明用 PNG 代替 Symbol放大就糊、换色要备多套图。能用 SymbolGlyph 就别用 PNG。不利用多色能力部分 Symbol 支持多色传颜色数组即可别只设单色。忽略动效symbolEffect能让点赞等交互活起来免费的原生动效不用白不用。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例SymbolGlyph 矢量图标用SymbolGlyph显示可变色、可变粗的矢量图标。实现拆解// SymbolGlyph矢量图标支持渲染策略与颜色EntryComponentstruct SymbolDemo{build(){Row({space:24}){SymbolGlyph($r(sys.symbol.heart_fill)).fontSize(40).fontColor([#FF4081])// 可设多色.renderingStrategy(SymbolRenderingStrategy.SINGLE)// 单色渲染SymbolGlyph($r(sys.symbol.star_fill)).fontSize(40).fontWeight(FontWeight.Bold)// 可变粗细}.padding(20)}}你会看到什么两个矢量图标心形、星形清晰显示可整体改色、改粗细且放大不糊——因为是矢量而非位图。动手改一改把renderingStrategy改成MULTI_COLOR体验系统自带多色图标。给图标加.onClick 切换fontColor做「收藏变红」。用SymbolEffect加点击动效。写在最后SymbolGlyph 是图标的最优解矢量不糊、任意着色、原生动效、系统内置。一个.fontColor解决过去要准备 N 套图的问题。把你项目里那些写死颜色的 PNG 图标换成 SymbolGlyph尤其是点赞、收藏、星级这类需要状态变化的——你会发现主题适配和交互动效一口气都解决了。