文章目录
- 前言
- 案例效果和学习目标
- 从布局读到状态
- 重点代码解释
- 完整代码
- 我的小建议
前言
这组案例开始进入选择类和调节类组件，写业务页面时会经常遇到。这个案例围绕Checkbox 综合使用展开，重点不是把属性背下来，而是弄清楚状态、组件和用户操作之间怎么连起来。
这篇我会把重点放在组合案例上，尽量说清楚它在真实页面里有什么用。
案例效果和学习目标
如果把它放到真实项目里，常见位置可能是设置页、筛选页、编辑页，或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下，页面就应该给出明确反馈。
| 维度 | 内容 |
|---|---|
| 案例主题 | Checkbox 综合使用 |
| 核心 API | selectedColor |
| 使用场景 | 综合选择 |
| 文章侧重点 | 组合案例 |
从布局读到状态
代码结构可以按三层读：外层负责页面背景和留白，中间卡片承载主要内容，内部组件处理具体交互。这样的层级不花哨，但维护起来比较舒服。
我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途，比随手写
flag、value后面省心很多。
重点代码解释
先看一段连续代码，基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。
@Entry@Componentstruct CheckboxCompletePanel{@StateisShow:boolean=true@StateallChecked:boolean=false@Stateindeterminate:boolean=false@Stateitems:boolean[]=[false,false,false,false,false]@StatedisabledItem:boolean=falseupdateAllState(){constcount=this.items.filter(i=>i).lengthif(count===0){this.allChecked=false;this.indeterminate=false}elseif(count===this.items.length){this.allChecked=true;this.indeterminate=false}else{this.allChecked=false;this.indeterminate=true}}build(){Column(){这段代码可以拆成几块看：
@State保存当前页面状态，用户操作之后会触发 UI 更新。selectedColor是案例的关键入口，真正的行为通常由它和事件回调一起完成。- 布局属性服务于业务表达，选中、禁用、拖动这些状态最好都能在视觉上看出来。
完整代码
下面是整理后的完整代码。组件名已经改成CheckboxCompletePanel，共享颜色也内置到当前文件里，单独复制出来读会更方便。
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='#F5F6FA'constCARD_BG_COLOR:string='#FFFFFF'constTHEME_COLOR:string='#4D96FF'constSUBTEXT_COLOR:string='#8A8A8A'@Entry@Componentstruct CheckboxCompletePanel{@StateisShow:boolean=true@StateallChecked:boolean=false@Stateindeterminate:boolean=false@Stateitems:boolean[]=[false,false,false,false,false]@StatedisabledItem:boolean=falseupdateAllState(){constcount=this.items.filter(i=>i).lengthif(count===0){this.allChecked=false;this.indeterminate=false}elseif(count===this.items.length){this.allChecked=true;this.indeterminate=false}else{this.allChecked=false;this.indeterminate=true}}build(){Column(){if(this.isShow){Scroll(){Column(){Text('Checkbox 综合演示').fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})Row(){Checkbox().select(this.allChecked).onChange((v:boolean)=>{this.allChecked=vthis.indeterminate=falsefor(leti=0;i<this.items.length;i++)this.items[i]=v})Text('全选所有任务').fontSize(15).fontWeight(FontWeight.Bold).margin({left:8})}.width('100%').padding(10).margin({bottom:8}).backgroundColor(THEME_COLOR+'10').borderRadius(6)ForEach([0,1,2,3,4],(i:number)=>{Row(){Checkbox().select(this.items[i]).selectedColor(COLOR_OPTIONS[i%COLOR_OPTIONS.length].value).enabled(i!==4||!this.disabledItem).onChange((v:boolean)=>{this.items[i]=vthis.updateAllState()})Text(`任务${i+1}：${['写代码','写测试','CodeReview','部署上线','写文档'][i]}`).fontSize(14).margin({left:8})if(i===4&&this.disabledItem){Text('禁用').fontSize(10).fontColor(SUBTEXT_COLOR).padding({left:4,right:4}).borderRadius(3).backgroundColor('#F0F0F0')}}.margin({bottom:10})})Divider().margin({top:8,bottom:8})Row(){Checkbox().select(this.disabledItem).onChange((v:boolean)=>{this.disabledItem=v})Text('禁用最后一项任务').fontSize(14).margin({left:8})}}.width('100%').padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}}Text('复选框综合面板：Checkbox 综合 - 全选/不确定态/禁用/多色').fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width('100%').height('100%').backgroundColor(PAGE_BG_COLOR).padding(16)}}我的小建议
继续扩展的话，我会把静态选项抽成接口返回的数据，再补上空状态和异常状态。示例页面先把核心交互跑通就够了，到了业务页面，状态边界才是真正容易出问题的地方。
