HarmonyOS6 半年磨一剑 - RcRadio 组件形状尺寸与颜色系统深度剖析

文章目录前言一、形状系统1.1 两种形状的实现原理1.2 形状参数对比二、尺寸系统2.1 三级预设尺寸2.2 自定义数值尺寸2.3 尺寸驱动链三处联动三、颜色系统3.1 四个颜色参数3.2 普通样式的四态颜色状态机3.3 按钮样式的颜色状态机3.4 多色彩主题定制示例四、形状与尺寸组合示例4.1 完整组合演示总结前言在单选框的视觉设计中形状、尺寸和颜色是影响用户认知的三大核心要素。不同的产品风格对单选框有着差异化的视觉要求有些场景需要传统的圆形单选点有些需要方形以和整体设计语言保持一致有些场景需要大号控件方便触控操作有些需要精准的品牌色定制。RcRadio通过一套完整的形状-尺寸-颜色三维参数体系覆盖了这些差异化需求。本文深度解析 RcRadio 的形状切换机制、三级尺寸驱动链、四态颜色状态机和自定义颜色系统帮助开发者精确掌控单选框的视觉表现。一、形状系统1.1 两种形状的实现原理RcRadio 通过radioShape参数支持两种形状exporttypeRcRadioShapecircle|square形状切换不只是外观变化它实际驱动了三处差异化逻辑差异一边框圆角计算privategetRcRadioBorderRadius():number{if(this.radioShapecircle){returnthis.getRcRadioSize()/2// 半径 边长/2形成完整圆形}return3// 方形保留小圆角避免生硬}圆形的圆角半径等于边长的一半在任意尺寸下都能保持完美圆形方形使用固定3px圆角视觉上更柔和。差异二选中图标形态if(this.radioShapecircle){Circle().width(this.getRcRadioIconSize()).height(this.getRcRadioIconSize()).fill(this.iconColor)}else{Rect().width(this.getRcRadioIconSize()).height(this.getRcRadioIconSize()).fill(this.iconColor).borderRadius(2)}圆形选中状态渲染一个实心圆点方形则渲染一个带小圆角的矩形块。两者都以iconColor默认白色填充在有色背景上形成清晰对比。差异三图标尺寸比例privategetRcRadioIconSize():number{if(this.iconSize){returntypeofthis.iconSizenumber?this.iconSize:Number(this.iconSize)}constboxSizethis.getRcRadioSize()if(this.customCheckIcon){returnboxSize*0.75// 自定义图标75% 比例}returnboxSize*0.5// 默认圆点/方块50% 比例}默认情况下选中图标为外框的 50%留出 25% 的背景边距视觉比例恰当。使用自定义图标时比例提升到 75%让图标更清晰可辨。1.2 形状参数对比radioShape边框圆角选中图标适用风格circle默认边长/2完整圆形实心圆点传统表单、通用场景square固定 3px小圆角矩形块方块风格 UI、自定义设计语言提示RcRadioGroup通过radioGroupShape参数统一设置整组的形状无需在每个选项上单独指定。二、尺寸系统2.1 三级预设尺寸RcRadio 提供三种预设尺寸通过radioSize参数指定privategetRcRadioSize():number{switch(this.radioSize){casesmall:return16caselarge:return22casedefault:default:return18}}预设值方框边长典型使用场景small16px信息密度高的列表、紧凑表单default18px通用场景平衡视觉与触控large22px大字体排版、辅助功能、老年用户场景2.2 自定义数值尺寸除预设值外radioSize还接受数字或数字字符串// 写法一直接数字RcRadio({radioSize:30,...})// 写法二数字字符串RcRadio({radioSize:24,...})源码的尺寸解析逻辑privategetRcRadioSize():number{if(typeofthis.radioSizenumber){returnthis.radioSize// 直接数字直接返回}if(typeofthis.radioSizestring!isNaN(Number(this.radioSize))){returnNumber(this.radioSize)// 数字字符串转换后返回}switch(this.radioSize){...}// 预设字符串走 switch}三种输入形式通通被正确处理业务层无需关心内部转换细节。2.3 尺寸驱动链三处联动radioSize不只控制方框边长还通过内部计算方法驱动三处尺寸的联动radioSize ├── getRcRadioSize() → 方框宽高 ├── getRcRadioIconSize() → 选中图标宽高方框 × 0.5 或 0.75 ├── getRcRadioBorderRadius()→ 圆角半径圆形方框/2方形3 └── getRcRadioLabelSize() → 标签字号small→12, default→14, large→16标签字号的联动逻辑privategetRcRadioLabelSize():number{if(typeofthis.labelSizenumber){returnthis.labelSize// 手动指定优先}switch(this.radioSize){casesmall:return12caselarge:return16casedefault:default:return14}}当labelSize未手动指定时标签字号会随radioSize自动协调——使用large尺寸时标签字体也自动变大保持整体视觉比例一致。提示labelSize参数可以手动覆盖联动逻辑。例如用large尺寸但需要小字标签时传入labelSize{12}即可打破联动实现精确控制。三、颜色系统3.1 四个颜色参数RcRadio 的颜色系统由四个独立参数构成参数默认值作用activeColor#409EFF蓝色选中状态的方框背景色、边框色inactiveColor#DCDFE6浅灰未选中状态的方框边框色iconColor#FFFFFF白色选中图标圆点/方块/自定义图标的颜色labelColor#303133深灰文本标签的颜色3.2 普通样式的四态颜色状态机RcRadio 的方框颜色根据禁用/选中/默认三种状态分别计算背景色和边框色形成四种视觉态背景色状态机privategetRcRadioBackgroundColor():string|Resource{if(this.disabled){return#F5F7FA// 禁用态浅灰背景传达不可操作}if(this.rcRadioIsChecked){returnthis.activeColor// 选中态主题色背景}returntransparent// 未选中态透明显示父容器背景}边框色状态机privategetRcRadioBorderColor():string|Resource{if(this.disabled){return#E4E7ED// 禁用态更深的灰色边框}if(this.rcRadioIsChecked){returnthis.activeColor// 选中态与背景同色形成整体感}returnthis.inactiveColor// 未选中态自定义 inactiveColor}四种视觉态的完整表现状态背景色边框色图标未选中正常透明inactiveColor不显示选中正常activeColoractiveColor白色圆点/方块未选中禁用#F5F7FA#E4E7ED不显示选中禁用#F5F7FA#E4E7ED不显示背景变灰遮盖3.3 按钮样式的颜色状态机按钮样式isButton: true有独立的颜色计算逻辑privategetRcRadioButtonBackgroundColor():string|Resource{if(this.disabled)return#F5F7FAif(this.rcRadioIsChecked)returnthis.activeColorreturn#FFFFFF// 未选中白色背景}privategetRcRadioButtonTextColor():string|Resource{if(this.disabled)return#C0C4CC// 禁用浅灰文字if(this.rcRadioIsChecked)return#FFFFFF// 选中白色文字returnthis.labelColor// 未选中标签色}按钮样式的视觉逻辑未选中时白底深字选中时彩色背景白字形成强对比适合工具栏或筛选器场景。3.4 多色彩主题定制示例import{RcRadio,RcRadioValue}fromrchouiEntryComponentstruct ColorThemeDemo{StatecolorValue:RcRadioValuebluebuild(){Column({space:20}){Text(自定义颜色主题).fontSize(18).fontWeight(FontWeight.Bold)Row({space:20}){RcRadio({radioLabel:蓝色,radioValue:blue,activeColor:#409EFF,modelValue:this.colorValue,onModelValueChange:(v){this.colorValuev}})RcRadio({radioLabel:红色,radioValue:red,activeColor:#F56C6C,modelValue:this.colorValue,onModelValueChange:(v){this.colorValuev}})RcRadio({radioLabel:绿色,radioValue:green,activeColor:#67C23A,modelValue:this.colorValue,onModelValueChange:(v){this.colorValuev}})RcRadio({radioLabel:橙色,radioValue:orange,activeColor:#E6A23C,modelValue:this.colorValue,onModelValueChange:(v){this.colorValuev}})}.width(100%)Text(当前选中${this.colorValue}).fontSize(14).fontColor(#409EFF)}.padding(20).width(100%).height(100%)}}代码说明每个RcRadio配置不同的activeColor同一组单选框可以有各自的选中颜色。这在视觉上区分各选项适合颜色选择、状态标识等特殊场景。四、形状与尺寸组合示例4.1 完整组合演示import{RcRadio,RcRadioGroup,RcRadioOption,RcRadioValue}fromrchouiEntryComponentstruct ShapeSizeDemo{StatecircleValue:RcRadioValuec1StatesquareValue:RcRadioValues1StatecustomValue:RcRadioValuen1privateoptions:RcRadioOption[][{value:c1,label:选项一},{value:c2,label:选项二},{value:c3,label:选项三}]privatesquareOptions:RcRadioOption[][{value:s1,label:选项一},{value:s2,label:选项二},{value:s3,label:选项三}]build(){Scroll(){Column({space:20}){Text(形状与尺寸组合).fontSize(20).fontWeight(FontWeight.Bold).margin({top:20})// 圆形 - 三种尺寸Column({space:12}){Text(圆形 - 三种尺寸).fontSize(15).fontWeight(FontWeight.Medium)Row({space:20}){RcRadio({radioLabel:small,radioValue:c1,radioSize:small,modelValue:this.circleValue,onModelValueChange:(v){this.circleValuev}})RcRadio({radioLabel:default,radioValue:c2,radioSize:default,modelValue:this.circleValue,onModelValueChange:(v){this.circleValuev}})RcRadio({radioLabel:large,radioValue:c3,radioSize:large,modelValue:this.circleValue,onModelValueChange:(v){this.circleValuev}})}}.padding(16).backgroundColor(#FFFFFF).borderRadius(8).alignItems(HorizontalAlign.Start).width(100%)// 方形 - 三种尺寸Column({space:12}){Text(方形 - 三种尺寸).fontSize(15).fontWeight(FontWeight.Medium)Row({space:20}){RcRadio({radioLabel:small,radioValue:s1,radioShape:square,radioSize:small,modelValue:this.squareValue,onModelValueChange:(v){this.squareValuev}})RcRadio({radioLabel:default,radioValue:s2,radioShape:square,radioSize:default,modelValue:this.squareValue,onModelValueChange:(v){this.squareValuev}})RcRadio({radioLabel:large,radioValue:s3,radioShape:square,radioSize:large,modelValue:this.squareValue,onModelValueChange:(v){this.squareValuev}})}}.padding(16).backgroundColor(#FFFFFF).borderRadius(8).alignItems(HorizontalAlign.Start).width(100%)// 使用 Group 统一设置形状Column({space:12}){Text(RcRadioGroup 统一形状方形).fontSize(15).fontWeight(FontWeight.Medium)RcRadioGroup({options:this.squareOptions,radioGroupShape:square,radioGroupSize:large,activeColor:#67C23A,modelValue:this.customValue,onModelValueChange:(v){this.customValuev}})}.padding(16).backgroundColor(#FFFFFF).borderRadius(8).alignItems(HorizontalAlign.Start).width(100%)}.width(90%).padding({bottom:40})}.width(100%).height(100%).backgroundColor(#F5F7FA)}}代码说明RcRadioGroup通过radioGroupShape和radioGroupSize参数统一设置整组的形状和尺寸所有子项自动继承无需逐项配置。总结RcRadio 的形状-尺寸-颜色三维参数体系构成了一套完整的视觉定制框架。radioShape控制方框和选中图标的形态通过circle/square两种模式适应不同设计语言尺寸系统通过预设枚举加自定义数值的双通道输入驱动方框、图标、圆角、标签字号四处联动确保整体比例协调颜色系统通过activeColor/inactiveColor/iconColor/labelColor四参数组合覆盖从未选中到选中再到禁用的全部视觉状态并对普通样式和按钮样式分别实现独立的颜色状态机。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是我持续创作的动力