文章目录前言这个写法的价值组件 API 对照关键代码说明完整代码写在最后前言这组案例开始进入选择类和调节类组件写业务页面时会经常遇到。这个案例围绕Toggle 自定义样式展开重点不是把属性背下来而是弄清楚状态、组件和用户操作之间怎么连起来。这篇我会把重点放在细节打磨上尽量说清楚它在真实页面里有什么用。这个写法的价值如果把它放到真实项目里常见位置可能是设置页、筛选页、编辑页或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下页面就应该给出明确反馈。维度内容案例主题Toggle 自定义样式核心 APIswitchPointColor使用场景开关样式文章侧重点细节打磨组件 API 对照代码结构可以按三层读外层负责页面背景和留白中间卡片承载主要内容内部组件处理具体交互。这样的层级不花哨但维护起来比较舒服。我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途比随手写flag、value后面省心很多。关键代码说明先看一段连续代码基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。EntryComponentstruct CustomToggleStyle{StateisShow:booleantrueStateisDark:booleanfalsebuild(){Column(){if(this.isShow){Column(){Text(Toggle 自定义样式).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})Row(){Text(Moon)Toggle({type:ToggleType.Switch,isOn:this.isDark}).selectedColor(#1A1A2E).switchPointColor(#FFD93D).onChange((v:boolean){this.isDarkv})这段代码可以拆成几块看State保存当前页面状态用户操作之后会触发 UI 更新。switchPointColor是案例的关键入口真正的行为通常由它和事件回调一起完成。布局属性服务于业务表达选中、禁用、拖动这些状态最好都能在视觉上看出来。完整代码下面是整理后的完整代码。组件名已经改成CustomToggleStyle共享颜色也内置到当前文件里单独复制出来读会更方便。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#FFFFFFconstSUBTEXT_COLOR:string#8A8A8AEntryComponentstruct CustomToggleStyle{StateisShow:booleantrueStateisDark:booleanfalsebuild(){Column(){if(this.isShow){Column(){Text(Toggle 自定义样式).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})Row(){Text(Moon)Toggle({type:ToggleType.Switch,isOn:this.isDark}).selectedColor(#1A1A2E).switchPointColor(#FFD93D).onChange((v:boolean){this.isDarkv}).width(56).height(30)Text(Sun)}.padding(12).borderRadius(50).backgroundColor(this.isDark?#1A1A2E:#FFD93D20).margin({bottom:16})Row(){Text(电源).fontSize(13).fontColor(SUBTEXT_COLOR)Toggle({type:ToggleType.Switch,isOn:true}).selectedColor(COLOR_OPTIONS[0].value).switchPointColor(#FF6B6B).width(60).height(28)}.margin({bottom:14})Row(){Text(渐变).fontSize(13).fontColor(SUBTEXT_COLOR)Toggle({type:ToggleType.Button,isOn:false}).selectedColor(COLOR_OPTIONS[6].value).width(48).height(28)}Text(通过 width/height/selectedColor/switchPointColor 实现个性化).fontSize(11).fontColor(SUBTEXT_COLOR).margin({top:14})}.width(100%).padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}Text(自定义开关样式Toggle 自定义 - 完全自定义样式的开关).fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}写在最后继续扩展的话我会把静态选项抽成接口返回的数据再补上空状态和异常状态。示例页面先把核心交互跑通就够了到了业务页面状态边界才是真正容易出问题的地方。