文章目录功能介绍1. 什么是 Symbol 类型图标2. 核心配置项代码核心配置解析设置 Symbol 前缀图标1. 配置结构2. SymbolGlyphModifier 构建3. 双态图标配置4. 状态自动联动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 图标显示效果未激活状态图标绿色星星文字蓝色背景系统默认按钮色激活状态图标红色星星文字系统对比色背景系统强调色总结必须导入 SymbolGlyphModifierSymbol 图标只能使用系统内置图标$r(sys.symbol.xxx)prefixSymbol与prefixIcon二选一不可同时使用激活态图标由activated状态自动驱动图标颜色、大小可独立配置如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
HarmonyOS 6 Chip 组件：设置 Symbol 类型图标使用文档
文章目录功能介绍1. 什么是 Symbol 类型图标2. 核心配置项代码核心配置解析设置 Symbol 前缀图标1. 配置结构2. SymbolGlyphModifier 构建3. 双态图标配置4. 状态自动联动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 图标显示效果未激活状态图标绿色星星文字蓝色背景系统默认按钮色激活状态图标红色星星文字系统对比色背景系统强调色总结必须导入 SymbolGlyphModifierSymbol 图标只能使用系统内置图标$r(sys.symbol.xxx)prefixSymbol与prefixIcon二选一不可同时使用激活态图标由activated状态自动驱动图标颜色、大小可独立配置如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
