文章目录前言先看这个案例解决什么状态为什么这样设计关键代码拆开看完整代码落地时我会怎么改前言这组案例开始进入选择类和调节类组件写业务页面时会经常遇到。这个案例围绕Radio 综合设置中心展开重点不是把属性背下来而是弄清楚状态、组件和用户操作之间怎么连起来。设置中心经常会出现多组单选这个案例刚好能看到 group 和状态字段如何对应。先看这个案例解决什么如果把它放到真实项目里常见位置可能是设置页、筛选页、编辑页或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下页面就应该给出明确反馈。维度内容案例主题Radio 综合设置中心核心 APIradioStyle使用场景设置中心文章侧重点多组互斥状态为什么这样设计代码结构可以按三层读外层负责页面背景和留白中间卡片承载主要内容内部组件处理具体交互。这样的层级不花哨但维护起来比较舒服。我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途比随手写flag、value后面省心很多。关键代码拆开看先看一段连续代码基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。interfaceThemeItem{v:string;l:string;c:string}interfaceFontItem{v:string;l:string;s:number}interfaceNotifyItem{v:string;l:string;desc:string}EntryComponentstruct SettingsRadioCenter{StateisShow:booleantrueStatetheme:stringautoStatefont:stringmediumStatenotification:stringallbuild(){Column(){if(this.isShow){Scroll(){Column(){Text(Radio 综合 - 设置中心).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:16})这段代码可以拆成几块看State保存当前页面状态用户操作之后会触发 UI 更新。radioStyle是案例的关键入口真正的行为通常由它和事件回调一起完成。布局属性服务于业务表达选中、禁用、拖动这些状态最好都能在视觉上看出来。完整代码下面是整理后的完整代码。组件名已经改成SettingsRadioCenter共享颜色也内置到当前文件里单独复制出来读会更方便。constCOLOR_OPTIONS:Array{name:string;value:string}[{name:蓝色,value:#4D96FF},{name:绿色,value:#6BCB77},{name:黄色,value:#FFD93D},{name:红色,value:#FF6B6B},{name:紫色,value:#9B59B6},{name:橙色,value:#FFA500},{name:青色,value:#00BCD4},{name:粉色,value:#FF69B4},{name:灰蓝,value:#607D8B},{name:深色,value:#333333}]constPAGE_BG_COLOR:string#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstTHEME_COLOR:string#4D96FFconstSUBTEXT_COLOR:string#8A8A8AinterfaceThemeItem{v:string;l:string;c:string}interfaceFontItem{v:string;l:string;s:number}interfaceNotifyItem{v:string;l:string;desc:string}EntryComponentstruct SettingsRadioCenter{StateisShow:booleantrueStatetheme:stringautoStatefont:stringmediumStatenotification:stringallbuild(){Column(){if(this.isShow){Scroll(){Column(){Text(Radio 综合 - 设置中心).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:16})Column(){Text(主题模式).fontSize(15).fontWeight(FontWeight.Bold).margin({bottom:10})Row({space:10}){ForEach([{v:auto,l:自动,c:COLOR_OPTIONS[8].value},{v:light,l:浅色,c:COLOR_OPTIONS[2].value},{v:dark,l:深色,c:COLOR_OPTIONS[9].value}],(item:ThemeItem){Column(){Text(item.l).fontSize(13).fontWeight(FontWeight.Medium).fontColor(this.themeitem.v?item.c:#666)Radio({value:item.v,group:themeGroup}).checked(this.themeitem.v).radioStyle({checkedBackgroundColor:item.c}).onChange((c:boolean){if(c)this.themeitem.v}).margin({top:6})}.padding(10).borderRadius(8).backgroundColor(this.themeitem.v?item.c10:#FAFAFA).border({width:this.themeitem.v?1:0,color:item.c,radius:8}).layoutWeight(1)})}}.margin({bottom:16})Column(){Text(字体大小).fontSize(15).fontWeight(FontWeight.Bold).margin({bottom:10})Row({space:10}){ForEach([{v:small,l:小,s:13},{v:medium,l:中,s:16},{v:large,l:大,s:19}],(item:FontItem){Column(){Text(Aa).fontSize(item.s).fontWeight(FontWeight.Bold).fontColor(this.fontitem.v?THEME_COLOR:#666)Radio({value:item.v,group:fontGroup}).checked(this.fontitem.v).onChange((c:boolean){if(c)this.fontitem.v}).margin({top:6})}.padding(10).borderRadius(8).backgroundColor(this.fontitem.v?THEME_COLOR10:#FAFAFA).border({width:this.fontitem.v?1:0,color:THEME_COLOR,radius:8}).layoutWeight(1)})}}.margin({bottom:16})Column(){Text(通知设置).fontSize(15).fontWeight(FontWeight.Bold).margin({bottom:10})ForEach([{v:all,l:全部通知,desc:接收所有通知消息},{v:important,l:重要通知,desc:仅接收重要通知},{v:none,l:关闭通知,desc:不接收任何通知}],(item:NotifyItem){Row(){Radio({value:item.v,group:notificationGroup}).checked(this.notificationitem.v).radioStyle({checkedBackgroundColor:COLOR_OPTIONS[5].value}).onChange((c:boolean){if(c)this.notificationitem.v})Column(){Text(item.l).fontSize(14)Text(item.desc).fontSize(11).fontColor(SUBTEXT_COLOR)}.alignItems(HorizontalAlign.Start).margin({left:8})}.width(100%).padding({top:10,bottom:10}).border({width:{bottom:0.5},color:#F5F5F5})})}}.width(100%).padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}}Text(单选设置中心Radio 综合 - 多组 RadioGroup 设置中心).fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}落地时我会怎么改继续扩展的话我会把静态选项抽成接口返回的数据再补上空状态和异常状态。示例页面先把核心交互跑通就够了到了业务页面状态边界才是真正容易出问题的地方。