文章目录什么是 Symbol 图标代码详解1. 定义 Symbol 状态变量normal activated2. Chip 内部配置 Symbol 图标3. 最右侧 BuilderSymbol 图标按钮4. 绑定右侧 Symbol Builder代码总结什么是 Symbol 图标HarmonyOS 系统级矢量图标支持自定义颜色、大小、状态比普通图片更清晰、占用资源更小支持normal未选中/ activated选中双状态自动切换代码详解1. 定义 Symbol 状态变量normal activated// 前置图标未选中状态星星StateprefixModifierNormal:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_star));// 前置图标选中状态红色星星StateprefixModifierActivated:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_star)).fontColor([Color.Red]);// 后置图标未选中状态WiFiStatesuffixModifierNormal:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_wifi));// 后置图标选中状态红色WiFiStatesuffixModifierActivated:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_wifi)).fontColor([Color.Red]);$r(sys.symbol.xxx)系统内置 Symbol 图标.fontColor([Color.Red])自定义选中颜色一套变量自动适配未选中/选中两种状态2. Chip 内部配置 Symbol 图标items:[{// 前置 Symbol 图标自动切换状态prefixSymbol:{normal:this.prefixModifierNormal,// 未选中activated:this.prefixModifierActivated// 选中},label:{text:操作块1},// 后置 Symbol 图标suffixSymbol:{normal:this.suffixModifierNormal,activated:this.suffixModifierActivated},allowClose:false,},...]prefixSymbolChip 左侧 Symbol 图标suffixSymbolChip 右侧 Symbol 图标无需手动控制状态Chip 选中时自动切换为 activated 样式3. 最右侧 BuilderSymbol 图标按钮LocalBuilderChipGroupSuffix():void{IconGroupSuffix({items:[// 右侧自定义 Symbol 按钮搜索图标newSymbolGlyphModifier($r(sys.symbol.magnifyingglass)).onClick((){// 全选 / 取消全选 逻辑if(this.selected_statefalse){this.selected_index[0,1,2,3,4,5,6];this.selected_statetrue;}else{this.selected_index[];this.selected_statefalse;}})]})}直接在IconGroupSuffix中使用new SymbolGlyphModifier支持.onClick()绑定点击事件实现标签组最右侧 Symbol 自定义按钮4. 绑定右侧 Symbol BuilderChipGroup({...其他配置,suffix:this.ChipGroupSuffix// 绑定右侧 Symbol 自定义 Builder})代码import{ChipSize,ChipGroup,IconGroupSuffix,SymbolGlyphModifier}fromkit.ArkUI;EntryPreviewComponentstruct Index{Stateselected_index:Arraynumber[0,1,2,3,4,5,6];Stateselected_state:booleantrue;StateprefixModifierNormal:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_star));StateprefixModifierActivated:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_star)).fontColor([Color.Red]);StatesuffixModifierNormal:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_wifi));StatesuffixModifierActivated:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_wifi)).fontColor([Color.Red]);LocalBuilderChipGroupSuffix():void{// 开发者通过引用IconGroupSuffix实现组件最右侧的自定义组件效果。IconGroupSuffix({items:[newSymbolGlyphModifier($r(sys.symbol.magnifyingglass)).onClick((){if(this.selected_statefalse){this.selected_index[0,1,2,3,4,5,6];this.selected_statetrue;}else{this.selected_index[];this.selected_statefalse;}})]})}build(){Column(){ChipGroup({// items内每个对象设置的都是每个Chip的特定属性。items:[{prefixSymbol:{normal:this.prefixModifierNormal,activated:this.prefixModifierActivated},label:{text:操作块1},suffixSymbol:{normal:this.suffixModifierNormal,activated:this.suffixModifierActivated},allowClose:false,},{prefixSymbol:{normal:this.prefixModifierNormal,activated:this.prefixModifierActivated},label:{text:操作块2},allowClose:true,},{prefixIcon:{src:$r(sys.media.ohos_ic_public_clock)},label:{text:操作块3},allowClose:true,},{prefixIcon:{src:$r(sys.media.ohos_ic_public_cast_stream)},label:{text:操作块4},allowClose:true,},{prefixIcon:{src:$r(sys.media.ohos_ic_public_cast_mirror)},label:{text:操作块5},allowClose:true,},{prefixIcon:{src:$r(sys.media.ohos_ic_public_cast_stream)},label:{text:操作块6},allowClose:true,},],// 设置Chip的style属性。itemStyle:{size:ChipSize.NORMAL,backgroundColor:$r(sys.color.ohos_id_color_button_normal),fontColor:$r(sys.color.ohos_id_color_text_primary),selectedBackgroundColor:$r(sys.color.ohos_id_color_emphasize),selectedFontColor:$r(sys.color.ohos_id_color_text_primary_contrary),},selectedIndexes:this.selected_index,multiple:true,chipGroupSpace:{itemSpace:8,endSpace:0},chipGroupPadding:{top:10,bottom:10},onChange:(activatedChipsIndex:Arraynumber){console.info(chips on clicked, activated index activatedChipsIndex);},// 自定义builder在组件最右侧显示自定义的内容。suffix:this.ChipGroupSuffix})}}}运行效果如图总结必须导入SymbolGlyphModifier否则无法创建 Symbol 实例系统 Symbol 资源固定写法$r(sys.symbol.xxx)Chip 内 Symbol 必须配置normal activated两个状态右侧 Builder 可直接使用new SymbolGlyphModifier并绑定点击事件Symbol 支持.fontColor()、.fontSize()等丰富样式定制可与prefixIcon普通图标混合使用如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
HarmonyOS 6 ChipGroup Symbol 图标使用文档
文章目录什么是 Symbol 图标代码详解1. 定义 Symbol 状态变量normal activated2. Chip 内部配置 Symbol 图标3. 最右侧 BuilderSymbol 图标按钮4. 绑定右侧 Symbol Builder代码总结什么是 Symbol 图标HarmonyOS 系统级矢量图标支持自定义颜色、大小、状态比普通图片更清晰、占用资源更小支持normal未选中/ activated选中双状态自动切换代码详解1. 定义 Symbol 状态变量normal activated// 前置图标未选中状态星星StateprefixModifierNormal:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_star));// 前置图标选中状态红色星星StateprefixModifierActivated:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_star)).fontColor([Color.Red]);// 后置图标未选中状态WiFiStatesuffixModifierNormal:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_wifi));// 后置图标选中状态红色WiFiStatesuffixModifierActivated:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_wifi)).fontColor([Color.Red]);$r(sys.symbol.xxx)系统内置 Symbol 图标.fontColor([Color.Red])自定义选中颜色一套变量自动适配未选中/选中两种状态2. Chip 内部配置 Symbol 图标items:[{// 前置 Symbol 图标自动切换状态prefixSymbol:{normal:this.prefixModifierNormal,// 未选中activated:this.prefixModifierActivated// 选中},label:{text:操作块1},// 后置 Symbol 图标suffixSymbol:{normal:this.suffixModifierNormal,activated:this.suffixModifierActivated},allowClose:false,},...]prefixSymbolChip 左侧 Symbol 图标suffixSymbolChip 右侧 Symbol 图标无需手动控制状态Chip 选中时自动切换为 activated 样式3. 最右侧 BuilderSymbol 图标按钮LocalBuilderChipGroupSuffix():void{IconGroupSuffix({items:[// 右侧自定义 Symbol 按钮搜索图标newSymbolGlyphModifier($r(sys.symbol.magnifyingglass)).onClick((){// 全选 / 取消全选 逻辑if(this.selected_statefalse){this.selected_index[0,1,2,3,4,5,6];this.selected_statetrue;}else{this.selected_index[];this.selected_statefalse;}})]})}直接在IconGroupSuffix中使用new SymbolGlyphModifier支持.onClick()绑定点击事件实现标签组最右侧 Symbol 自定义按钮4. 绑定右侧 Symbol BuilderChipGroup({...其他配置,suffix:this.ChipGroupSuffix// 绑定右侧 Symbol 自定义 Builder})代码import{ChipSize,ChipGroup,IconGroupSuffix,SymbolGlyphModifier}fromkit.ArkUI;EntryPreviewComponentstruct Index{Stateselected_index:Arraynumber[0,1,2,3,4,5,6];Stateselected_state:booleantrue;StateprefixModifierNormal:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_star));StateprefixModifierActivated:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_star)).fontColor([Color.Red]);StatesuffixModifierNormal:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_wifi));StatesuffixModifierActivated:SymbolGlyphModifiernewSymbolGlyphModifier($r(sys.symbol.ohos_wifi)).fontColor([Color.Red]);LocalBuilderChipGroupSuffix():void{// 开发者通过引用IconGroupSuffix实现组件最右侧的自定义组件效果。IconGroupSuffix({items:[newSymbolGlyphModifier($r(sys.symbol.magnifyingglass)).onClick((){if(this.selected_statefalse){this.selected_index[0,1,2,3,4,5,6];this.selected_statetrue;}else{this.selected_index[];this.selected_statefalse;}})]})}build(){Column(){ChipGroup({// items内每个对象设置的都是每个Chip的特定属性。items:[{prefixSymbol:{normal:this.prefixModifierNormal,activated:this.prefixModifierActivated},label:{text:操作块1},suffixSymbol:{normal:this.suffixModifierNormal,activated:this.suffixModifierActivated},allowClose:false,},{prefixSymbol:{normal:this.prefixModifierNormal,activated:this.prefixModifierActivated},label:{text:操作块2},allowClose:true,},{prefixIcon:{src:$r(sys.media.ohos_ic_public_clock)},label:{text:操作块3},allowClose:true,},{prefixIcon:{src:$r(sys.media.ohos_ic_public_cast_stream)},label:{text:操作块4},allowClose:true,},{prefixIcon:{src:$r(sys.media.ohos_ic_public_cast_mirror)},label:{text:操作块5},allowClose:true,},{prefixIcon:{src:$r(sys.media.ohos_ic_public_cast_stream)},label:{text:操作块6},allowClose:true,},],// 设置Chip的style属性。itemStyle:{size:ChipSize.NORMAL,backgroundColor:$r(sys.color.ohos_id_color_button_normal),fontColor:$r(sys.color.ohos_id_color_text_primary),selectedBackgroundColor:$r(sys.color.ohos_id_color_emphasize),selectedFontColor:$r(sys.color.ohos_id_color_text_primary_contrary),},selectedIndexes:this.selected_index,multiple:true,chipGroupSpace:{itemSpace:8,endSpace:0},chipGroupPadding:{top:10,bottom:10},onChange:(activatedChipsIndex:Arraynumber){console.info(chips on clicked, activated index activatedChipsIndex);},// 自定义builder在组件最右侧显示自定义的内容。suffix:this.ChipGroupSuffix})}}}运行效果如图总结必须导入SymbolGlyphModifier否则无法创建 Symbol 实例系统 Symbol 资源固定写法$r(sys.symbol.xxx)Chip 内 Symbol 必须配置normal activated两个状态右侧 Builder 可直接使用new SymbolGlyphModifier并绑定点击事件Symbol 支持.fontColor()、.fontSize()等丰富样式定制可与prefixIcon普通图标混合使用如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
