HarmonyOS6 ArkTS CheckboxGroup

文章目录组件1. 组件定义2. 核心特性完整代码核心API与属性1. 构造参数2. 核心样式属性官方标准属性3. 形状枚举 CheckBoxShape4. 状态监听 onChange返回值 CheckboxGroupResult群组状态 SelectStatus核心功能1. 群组绑定规则2. 全选/部分选中/取消全选 自动逻辑3. 状态同步规范总结组件1. 组件定义CheckboxGroup是多选框群组控制器用于统一管理一组Checkbox组件的选中状态实现全选、反选、部分选中、状态联动等核心功能是表单、列表批量选择、筛选功能的核心组件。2. 核心特性与同组Checkbox自动双向联动支持全选/部分选中/未选中三种状态自动识别统一配置群组样式、颜色、形状实时返回选中的选项名称列表适配HarmonyOS全端设备手机、平板、智慧屏等完整代码// CheckboxGroupDemo.ets Entry Component struct CheckboxGroupDemo { // 控制全选状态由CheckboxGroup自动维护不要手动改 State isSelectAll: boolean false; // 记录选中的选项名称 State selectedNames: Arraystring []; build() { Column({ space: 20 }) { Text(CheckboxGroup 全选群组示例) .fontSize(22) .fontWeight(FontWeight.Bold) .margin({ top: 20 }); // 全选按钮CheckboxGroup Flex({ alignItems: ItemAlign.Center }) { CheckboxGroup({ group: myGroup }) .selectedColor(#007DFF) .unselectedColor(#999) .checkboxShape(CheckBoxShape.ROUNDED_SQUARE) .mark({ strokeColor: Color.White, strokeWidth: 2, size: 16 }) .onChange((result: CheckboxGroupResult) { // 接收群组状态All/Part/None console.info(群组状态 JSON.stringify(result)); this.selectedNames result.name; // 同步全选状态 this.isSelectAll result.status SelectStatus.All; }); Text(全选) .fontSize(18) // 去掉了手动改isSelectAll逻辑避免冲突 } .width(100%) .padding({ left: 15 }); // 分割线 Divider() .width(90%) .color(#eee) .margin(10); // 同组 Checkbox Flex({ direction: FlexDirection.Column }) { // 选项1 Flex({ alignItems: ItemAlign.Center }) { Checkbox({ name: item1, group: myGroup }) .selectedColor(#007DFF) .unselectedColor(#999) .shape(CheckBoxShape.ROUNDED_SQUARE) .mark({ strokeColor: Color.White }) .onChange((value: boolean) { console.info(item1 状态 value); }); Text(选项 1).fontSize(17); } // 选项2 Flex({ alignItems: ItemAlign.Center }) { Checkbox({ name: item2, group: myGroup }) .selectedColor(#007DFF) .unselectedColor(#999) .shape(CheckBoxShape.ROUNDED_SQUARE) .mark({ strokeColor: Color.White }) .onChange((value: boolean) { console.info(item2 状态 value); }); Text(选项 2).fontSize(17); } // 选项3 Flex({ alignItems: ItemAlign.Center}) { Checkbox({ name: item3, group: myGroup }) .selectedColor(#007DFF) .unselectedColor(#999) .shape(CheckBoxShape.ROUNDED_SQUARE) .mark({ strokeColor: Color.White }) .onChange((value: boolean) { console.info(item3 状态 value); }); Text(选项 3).fontSize(17); } } .padding({ left: 15 }); // 显示选中结果 Column({ space: 8 }) { Text(当前全选状态${this.isSelectAll ? 已全选 : 未全选}) .fontSize(16) .fontColor(#333); Text(已选中${this.selectedNames.length 0 ? this.selectedNames.join(、) : 无}) .fontSize(16) .fontColor(#007DFF); } .width(100%) .padding(15) .backgroundColor(#f8f8f8) .borderRadius(12) .margin(10); } .width(100%) .height(100%) .backgroundColor(#fff); } }运行效果如图核心API与属性1. 构造参数CheckboxGroup({ group: myGroup })group群组唯一标识字符串类型所有需要归为一组的Checkbox必须设置相同的group值2. 核心样式属性官方标准属性属性名作用示例值selectedColor设置群组/子项选中背景色#007DFFunselectedColor设置群组/子项未选中边框色#999checkboxShape设置多选框形状圆形/圆角方形CheckBoxShape.ROUNDED_SQUAREmark自定义对勾样式颜色、粗细、尺寸{strokeColor: Color.White}3. 形状枚举CheckBoxShapeCIRCLE圆形多选框ROUNDED_SQUARE圆角方形多选框示例默认使用4. 状态监听onChange.onChange((result: CheckboxGroupResult) { this.selectedNames result.name; this.isSelectAll result.status SelectStatus.All; })返回值CheckboxGroupResultresult.name已选中的Checkbox名称数组result.status群组整体状态枚举值SelectStatus群组状态SelectStatusAll全部选中Part部分选中None全部未选中核心功能1. 群组绑定规则CheckboxGroup 多个Checkbox设置相同group名称系统自动建立关联无需额外代码状态双向联动全选控制子项子项控制全选2. 全选/部分选中/取消全选 自动逻辑所有子项选中 →status All→ 全选框勾选部分子项选中 →status Part→ 全选框半选系统自动无选中 →status None→ 全选框取消3. 状态同步规范禁止手动修改selectAll绑定变量全选状态必须由onChange返回的status自动赋值这是避免状态错乱、选项全部取消的核心规范总结group必须唯一且一致不同群组必须使用不同名称避免状态冲突。禁止手动强制修改全选状态全选状态必须由CheckboxGroup.onChange自动维护否则会出现状态错乱。Checkbox必须配置name用于在result.name中识别选中项是业务逻辑的核心标识。样式优先级子Checkbox可单独配置样式会覆盖CheckboxGroup的统一样式。版本要求所有属性仅支持API 11 / HarmonyOS 6。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力