鸿蒙5.0版开发：ArkTS组件-基础组件（Checkbox）

往期鸿蒙全套实战文章必看：

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习蹊径
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习蹊径指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部门项目附源码）
  

---

Checkbox

提供多选框组件，通常用于某选项的打开或关闭。
   阐明：
  API version 11开始，Checkbox默认样式由圆角方形变为圆形。
  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  子组件

无
接口

Checkbox(options?: CheckboxOptions)
多选框组件。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌optionsCheckboxOptions否配置复选框的参数。 CheckboxOptions对象阐明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称类型必填形貌namestring否用于指定多选框名称。groupstring否用于指定多选框所属群组的名称（即所属CheckboxGroup的名称）。
阐明：
未配合使用CheckboxGroup组件时，此值无用。indicatorBuilder12+CustomBuilder否配置多选框的选中样式为自界说组件。自界说组件与Checkbox组件为中心点对齐显示。indicatorBuilder设置为undefined/null时，默认为indicatorBuilder未设置状态。 属性

除支持通用属性外，还支持以下属性：
select

select(value: boolean)
设置多选框是否选中。
从API version 10开始，该属性支持$$双向绑定变量。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueboolean是多选框是否选中。
默认值：false selectedColor

selectedColor(value: ResourceColor)
设置多选框选中状态颜色。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueResourceColor是多选框选中状态颜色。
默认值：$r(‘sys.color.ohos_id_color_text_primary_activated’)。
异常值按照默认值处置惩罚。 unselectedColor10+

unselectedColor(value: ResourceColor)
设置多选框非选中状态边框颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueResourceColor是多选框非选中状态边框颜色。
默认值：‘#33ffffff’。 mark10+

mark(value: MarkStyle)
设置多选框内部图标样式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueMarkStyle是多选框内部图标样式。 从API version 12开始，设置了indicatorBuilder时，按照indicatorBuilder中的内容显示。 shape11+

shape(value: CheckBoxShape)
设置CheckBox组件形状, 包括圆形和圆角方形。
卡片本领： 从API version 11开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueCheckBoxShape是CheckBox组件形状, 包括圆形和圆角方形。
默认值：CheckBoxShape.CIRCLE contentModifier12+

contentModifier(modifier: ContentModifier<CheckBoxConfiguration>)
定制CheckBox内容区的方法。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明modifierContentModifier<CheckBoxConfiguration>是在CheckBox组件上，定制内容区的方法。
modifier: 内容修改器，开发者须要自界说class实现ContentModifier接口。 变乱

支持通用变乱外，还支持以下变乱：
onChange

onChange(callback: (value: boolean) => void)
当选中状态发生变化时，触发该回调。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueboolean是返回true时，表示已选中。返回false时，表示未选中。 MarkStyle10+对象阐明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称类型必填默认值形貌strokeColorResourceColor否Color.White内部图标颜色。sizeLength否-内部图标大小，单元vp。默认大小与多选框组件宽度设置值同等。
不支持百分比情势设置。当设置为非法值时，按照默认值处置惩罚。strokeWidthLength否2内部图标粗细，单元vp。不支持百分比情势设置。当设置为非法值时，按照默认值处置惩罚。 CheckBoxShape11+枚举类型阐明

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
名称值阐明CIRCLE0圆形ROUNDED_SQUARE1圆角方形 CheckBoxConfiguration12+对象阐明

开发者须要自界说class实现ContentModifier接口。
参数名类型默认值阐明namestring-当前多选框名称。selectedbooleanfalse指示多选框是否被选中。
如果select属性没有设置默认值是false。
如果设置select属性，此值与设置select属性的值雷同。triggerChangeCallback<boolean>-触发多选框选中状态变化。 示例

示例1

1. // xxx.ets
2. @Entry
3. @Component
4. struct CheckboxExample {
5.   build() {
6.     Flex({ justifyContent: FlexAlign.SpaceAround }) {
7.       Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
8.         .select(true)
9.         .selectedColor(0xed6f21)
10.         .shape(CheckBoxShape.CIRCLE)
11.         .onChange((value: boolean) => {
12.           console.info('Checkbox1 change is' + value)
13.         })
14.       Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
15.         .select(false)
16.         .selectedColor(0x39a2db)
17.         .shape(CheckBoxShape.ROUNDED_SQUARE)
18.         .onChange((value: boolean) => {
19.           console.info('Checkbox2 change is' + value)
20.         })
21.     }
22.   }
23. }

复制代码

示例2

1. // xxx.ets
2. @Entry
3. @Component
4. struct Index {
6.   build() {
7.     Row() {
8.       Column() {
9.         Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
10.           Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
11.             .selectedColor(0x39a2db)
12.             .shape(CheckBoxShape.ROUNDED_SQUARE)
13.             .onChange((value: boolean) => {
14.               console.info('Checkbox1 change is'+ value)
15.             })
16.             .mark({
17.               strokeColor:Color.Black,
18.               size: 50,
19.               strokeWidth: 5
20.             })
21.             .unselectedColor(Color.Red)
22.             .width(30)
23.             .height(30)
24.           Text('Checkbox1').fontSize(20)
25.         }
26.         Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
27.           Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
28.             .selectedColor(0x39a2db)
29.             .shape(CheckBoxShape.ROUNDED_SQUARE)
30.             .onChange((value: boolean) => {
31.               console.info('Checkbox2 change is' + value)
32.             })
33.             .width(30)
34.             .height(30)
35.           Text('Checkbox2').fontSize(20)
36.         }
37.       }
38.       .width('100%')
39.     }
40.     .height('100%')
41.   }
42. }

复制代码

示例3

该示例实现了自界说复选框样式的功能，自界说样式实现了一个五边形复选框，如果选中，内部会出现赤色三角图案，标题会显示选中字样，如果取消选中，赤色三角图案消散，标题会显示非选中字样。

1. // xxx.ets
2. class MyCheckboxStyle implements ContentModifier<CheckBoxConfiguration> {
3.   selectedColor: Color = Color.White
4.   constructor(selectedColor: Color) {
5.     this.selectedColor = selectedColor;
6.   }
7.   applyContent() : WrappedBuilder<[CheckBoxConfiguration]>
8.   {
9.     return wrapBuilder(buildCheckbox)
10.   }
11. }
13. @Builder function buildCheckbox(config: CheckBoxConfiguration) {
14.   Column({space:10}) {
15.       Text(config.name  + (config.selected ? "（ 选中 ）" : "（ 非选中 ）")).margin({right : 70, top : 50})
16.       Text(config.enabled ? "enabled true" : "enabled false").margin({right : 110})
17.       Shape() {
18.         Path().width(100).height(100).commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z').fillOpacity(0).strokeWidth(3).onClick(()=>{
19.           if (config.selected) {
20.             config.triggerChange(false)
21.           } else {
22.             config.triggerChange(true)
23.           }
24.         }).opacity(config.enabled ? 1 : 0.1)
25.         Path().width(10).height(10).commands('M50 0 L100 100 L0 100 Z')
26.           .visibility(config.selected ? Visibility.Visible : Visibility.Hidden)
27.           .fill(config.selected ? (config.contentModifier as MyCheckboxStyle).selectedColor : Color.Black)
28.           .stroke((config.contentModifier as MyCheckboxStyle).selectedColor)
29.           .margin({left:11,top:10})
30.           .opacity(config.enabled ? 1 : 0.1)
31.       }
32.       .width(300)
33.       .height(200)
34.       .viewPort({ x: 0, y: 0, width: 310, height: 310 })
35.       .strokeLineJoin(LineJoinStyle.Miter)
36.       .strokeMiterLimit(5)
37.       .margin({left:50})
38.   }
39. }
41. @Entry
42. @Component
43. struct Index {
44.   @State checkboxEnabled: boolean = true;
45.   build() {
46.     Column({ space: 100 }) {
47.         Checkbox({ name: '复选框状态', group: 'checkboxGroup' })
48.         .contentModifier(new MyCheckboxStyle(Color.Red))
49.         .onChange((value: boolean) => {
50.           console.info('Checkbox change is' + value)
51.         }).enabled(this.checkboxEnabled)
53.       Row() {
54.         Toggle({ type: ToggleType.Switch, isOn: true }).onChange((value: boolean) => {
55.           if (value) {
56.             this.checkboxEnabled = true
57.           } else {
58.             this.checkboxEnabled = false
59.           }
60.         })
61.       }
62.     }.margin({top : 30})
63.   }
64. }

复制代码

示例4

该示例设置选中样式为Text。

1. // xxx.ets
2. @Entry
3. @Component
4. struct CheckboxExample {
5.   @Builder
6.   indicatorBuilder(value: number) {
7.     Column(){
8.       Text(value > 99 ? '99+': value.toString())
9.         .textAlign(TextAlign.Center)
10.         .fontSize(value > 99 ?  '16vp': '20vp')
11.         .fontWeight(FontWeight.Medium)
12.         .fontColor('#ffffffff')
13.     }
14.   }
15.   build() {
16.     Row() {
17.       Column() {
18.         Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
19.           Checkbox({ name: 'checkbox1', group: 'checkboxGroup', indicatorBuilder:()=>{this.indicatorBuilder(9)}})
20.             .shape(CheckBoxShape.CIRCLE)
21.             .onChange((value: boolean) => {
22.               console.info('Checkbox1 change is'+ value)
23.             })
24.             .mark({
25.               strokeColor:Color.Black,
26.               size: 50,
27.               strokeWidth: 5
28.             })
29.             .width(30)
30.             .height(30)
31.           Text('Checkbox1').fontSize(20)
32.         }.padding(15)
33.         Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
34.           Checkbox({ name: 'checkbox2', group: 'checkboxGroup', indicatorBuilder:()=>{this.indicatorBuilder(100)}})
35.             .shape(CheckBoxShape.ROUNDED_SQUARE)
36.             .onChange((value: boolean) => {
37.               console.info('Checkbox2 change is' + value)
38.             })
39.             .width(30)
40.             .height(30)
41.           Text('Checkbox2').fontSize(20)
42.         }
43.       }
44.       .width('100%')
45.     }
46.     .height('100%')
47.   }
48. }

复制代码

看完三件事❤️

• 如果你以为这篇内容对你还蛮有资助，我想约请你帮我三个小忙：
  
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  
• 关注作者，不定期分享原创知识。
  
• 同时可以等待后续文章ing