HarmonyOS 6 Chip 组件：设置 Symbol 类型图标使用文档

功能介绍

1. 什么是 Symbol 类型图标

Symbol 是 HarmonyOS 提供的系统矢量图标，具备：

• 矢量缩放不失真
• 支持动态修改颜色、大小
• 适配深色/浅色模式
• 统一系统视觉风格
• 无需本地图片资源

2. 核心配置项

prefixSymbol：专门为 Chip 组件配置前缀 Symbol 图标，支持：

• normal：默认状态下的图标样式
• activated：组件激活状态下的图标样式
  状态切换时自动切换图标样式，无需手动控制。

代码

import { Chip, ChipSize, SymbolGlyphModifier } from '@kit.ArkUI'; @Entry @Component struct Index { @State isActivated: boolean = false; build() { Column({ space: 10 }) { Chip({ // 设置前缀图标属性，symbol类型。 prefixSymbol: { normal: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Green]), activated: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Red]), }, // 设置文本属性。 label: { text: '操作块', fontSize: 12, fontColor: Color.Blue, activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), fontFamily: 'HarmonyOS Sans', labelMargin: { left: 20, right: 30 }, }, size: ChipSize.NORMAL, allowClose: true, enabled: true, activated: this.isActivated, backgroundColor: $r('sys.color.ohos_id_color_button_normal'), activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), borderRadius: $r('sys.float.ohos_id_corner_radius_button'), onClose: () => { console.info('chip on close'); }, onClicked: () => { console.info('chip on clicked'); } }) Button('改变激活状态') .onClick(() => { this.isActivated = !this.isActivated; }) } } }

运行效果如图;

核心配置解析：设置 Symbol 前缀图标

1. 配置结构

prefixSymbol: { normal: SymbolGlyphModifier, // 默认状态图标 activated: SymbolGlyphModifier // 激活状态图标 }

2. SymbolGlyphModifier 构建

必须使用SymbolGlyphModifier构建 Symbol 图标：

new SymbolGlyphModifier($r('sys.symbol.ohos_star')) .fontSize(16) // 图标大小 .fontColor([Color.Green]) // 图标颜色

3. 双态图标配置

• normal：默认状态 → 绿色星星图标
• activated：激活状态 → 红色星星图标

4. 状态自动联动

activated: this.isActivated

• 当isActivated = false→ 显示normal图标
• 当isActivated = true→ 显示activated图标

Symbol 图标显示效果

未激活状态

• 图标：绿色星星
• 文字：蓝色
• 背景：系统默认按钮色

激活状态

• 图标：红色星星
• 文字：系统对比色
• 背景：系统强调色

总结

1. 必须导入 SymbolGlyphModifier
2. Symbol 图标只能使用系统内置图标：$r('sys.symbol.xxx')
3. prefixSymbol与prefixIcon二选一，不可同时使用
4. 激活态图标由activated状态自动驱动
5. 图标颜色、大小可独立配置

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力