HarmonyOS7 复选框综合面板：用 selectedColor 做好综合选择

发布时间：2026/10/17 14:54:37

HarmonyOS7 复选框综合面板：用 selectedColor 做好综合选择
文章目录前言案例效果和学习目标从布局读到状态重点代码解释完整代码我的小建议前言这组案例开始进入选择类和调节类组件写业务页面时会经常遇到。这个案例围绕Checkbox 综合使用展开重点不是把属性背下来而是弄清楚状态、组件和用户操作之间怎么连起来。这篇我会把重点放在组合案例上尽量说清楚它在真实页面里有什么用。案例效果和学习目标如果把它放到真实项目里常见位置可能是设置页、筛选页、编辑页或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下页面就应该给出明确反馈。维度内容案例主题Checkbox 综合使用核心 APIselectedColor使用场景综合选择| 文章侧重点 | 组合案例 |从布局读到状态代码结构可以按三层读外层负责页面背景和留白中间卡片承载主要内容内部组件处理具体交互。这样的层级不花哨但维护起来比较舒服。我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途比随手写flag、value后面省心很多。重点代码解释先看一段连续代码基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。EntryComponentstruct CheckboxCompletePanel{StateisShow:booleantrueStateallChecked:booleanfalseStateindeterminate:booleanfalseStateitems:boolean[][false,false,false,false,false]StatedisabledItem:booleanfalseupdateAllState(){constcountthis.items.filter(ii).lengthif(count0){this.allCheckedfalse;this.indeterminatefalse}elseif(countthis.items.length){this.allCheckedtrue;this.indeterminatefalse}else{this.allCheckedfalse;this.indeterminatetrue}}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#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstTHEME_COLOR:string#4D96FFconstSUBTEXT_COLOR:string#8A8A8AEntryComponentstruct CheckboxCompletePanel{StateisShow:booleantrueStateallChecked:booleanfalseStateindeterminate:booleanfalseStateitems:boolean[][false,false,false,false,false]StatedisabledItem:booleanfalseupdateAllState(){constcountthis.items.filter(ii).lengthif(count0){this.allCheckedfalse;this.indeterminatefalse}elseif(countthis.items.length){this.allCheckedtrue;this.indeterminatefalse}else{this.allCheckedfalse;this.indeterminatetrue}}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.allCheckedvthis.indeterminatefalsefor(leti0;ithis.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_COLOR10).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(任务${i1}${[写代码,写测试,CodeReview,部署上线,写文档][i]}).fontSize(14).margin({left:8})if(i4this.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.disabledItemv})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)}}我的小建议继续扩展的话我会把静态选项抽成接口返回的数据再补上空状态和异常状态。示例页面先把核心交互跑通就够了到了业务页面状态边界才是真正容易出问题的地方。

相关新闻

重塑AI的“骨骼”：当精度扩散成为LLM权重的“超级压缩器”

重塑AI的“骨骼”：当精度扩散成为LLM权重的“超级压缩器”

我们正站在一个十字路口。一边是大型语言模型（LLM）爆炸式的智能增长，另一边是训练和部署这些庞然大物时令人窒息的计算成本。如果说GPU是AI的“心脏”，那么模型的**权重（Weights）**就是AI的“骨骼”——它决…

2026/10/17 14:55:09 阅读更多 →
HarmonyOS7 尺码单选列表：用 ForEach 做好尺码选择

HarmonyOS7 尺码单选列表：用 ForEach 做好尺码选择

文章目录前言这个写法的价值组件 API 对照关键代码说明完整代码写在最后前言 这组案例开始进入选择类和调节类组件，写业务页面时会经常遇到。这个案例围绕 Radio 垂直列表 展开，重点不是把属性背下来，而是弄清楚状态、组件和用户操作之间怎么…

2026/10/16 22:14:51 阅读更多 →
树数据结构与遍历算法全面解析

树数据结构与遍历算法全面解析

1. 树的基本概念与核心特性树（Tree）是计算机科学中最基础且应用最广泛的数据结构之一，它模拟了自然界中树的层次结构。与线性结构的数组和链表不同，树是一种非线性的、分层的数据结构，特别适合表示具有层级关系的数据。…

2026/10/17 14:58:24 阅读更多 →

最新新闻

Lean 4与AI结合使用：分步数学建模教程（TaoToken统一Key接入版）

Lean 4与AI结合使用：分步数学建模教程（TaoToken统一Key接入版）

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/17 22:22:23 阅读更多 →
第一次使用Visual Studio 2026+使用claude拓展：把API endpoint改到TaoToken的完整配置

第一次使用Visual Studio 2026+使用claude拓展：把API endpoint改到TaoToken的完整配置

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/17 22:22:23 阅读更多 →
真菌分解建模方法论：阿伦尼乌斯方程+水分权衡+SGD优化+CA仿真

真菌分解建模方法论：阿伦尼乌斯方程+水分权衡+SGD优化+CA仿真

简介：本资源为2021年美国大学生数学建模竞赛（MCM）特等奖（Outstanding Winner）论文合辑，面向数学建模参赛者、高校数理类专业学生及科研入门者，提供高水准赛题建模范式与跨学科方法论参考。合辑聚…

2026/10/17 22:22:23 阅读更多 →
AstronRPA：当RPA的稳定执行遇上AI Agent的智能决策，企业级自动化的新范式

AstronRPA：当RPA的稳定执行遇上AI Agent的智能决策，企业级自动化的新范式

最近跟几个做自动化的朋友聊天，大家都有同一个感觉：RPA 这个词好像有点“过气”了，大家张口闭口都是 AI Agent。可真到了企业里，那些每天凌晨跑批对账、逐个系统录单子、把网页表格搬来搬去的事儿，还是得靠 RPA 干。另…

2026/10/17 22:22:23 阅读更多 →
Rollback课程学习机制：让多轮Agent在错误级联时学会主动回滚

Rollback课程学习机制：让多轮Agent在错误级联时学会主动回滚

我们团队半年前在一次版本演示上翻过车。一个看似普通的多轮交互 Agentic 任务——用户连续提了几个需求，中间夹了一次工具调用，Agent 在第二个请求上理解错了意图，然后带着这个错误一路执行到底，输出了一份完全不可用的结果。更郁…

2026/10/17 22:22:23 阅读更多 →
STM32红外收发底层驱动实战：从NEC协议到示波器级调试

STM32红外收发底层驱动实战：从NEC协议到示波器级调试

简介：本资源是一份面向51单片机初学者与嵌入式开发者的红外通信模块实战代码详解资料，聚焦红外发射与接收功能的底层实现，解决遥控、设备控制等典型应用场景中的信号编解码与硬件驱动问题。压缩包为单个36KB的PDF文档，内容涵盖红外…

2026/10/17 22:21:23 阅读更多 →

日新闻

DeepSeek选型与部署：V3/R1、Ollama、API全攻略

DeepSeek选型与部署：V3/R1、Ollama、API全攻略

简介：《DeepSeek使用方法.pdf》是一份面向DeepSeek入门及进阶用户的完整使用指南，重点围绕V3与R1两款模型的能力差异与适用场景展开，帮助读者根据任务类型与成本选择合适的模型。资源共1个PDF文件，压缩包大小约311KB，篇…

2026/10/17 0:00:25 阅读更多 →
200+Deepseek润色指令拆解：从底层原理到场景落地的完整指南

200+Deepseek润色指令拆解：从底层原理到场景落地的完整指南

简介：这是一份聚焦DeepSeek提示词优化的《200Deepseek润色指令》PDF文档，共收录两百余条可直接套用的润色指令，涵盖语法修正、风格统一、逻辑梳理、表达精炼等维度，并针对商务写作、学术论文、广告文案等场景给出差异化建议。文档…

2026/10/17 0:00:25 阅读更多 →
OpenCV轮廓法物体计数系统：轻量、可控、可落地的工业级实现

OpenCV轮廓法物体计数系统：轻量、可控、可落地的工业级实现

简介：本资源是一份基于OpenCV的本科课程设计完整报告，面向计算机视觉初学者、图像处理学习者及高校通信/信息类专业学生，解决物体智能计数与检测结果结构化记录的实际问题。项目覆盖图像预处理、轮廓检测、边界框绘制、轨迹栏交互式参数调节、…

2026/10/17 0:00:25 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/16 21:35:51 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/17 1:44:59 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/16 15:04:24 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/16 21:54:38 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/17 17:22:31 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/16 14:23:36 阅读更多 →