1# Checkbox 2 3提供多选框组件，通常用于某选项的打开或关闭。 4 5> **说明：** 6> 7> API version 11开始，Checkbox默认样式由圆角方形变为圆形。 8> 9> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11## 子组件 12 13无 14 15## 接口 16 17Checkbox(options?: CheckboxOptions) 18 19多选框组件。 20 21**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数:** 26 27| 参数名 | 类型 | 必填 | 描述 | 28| ------- | ------------------------------------------- | ---- | ------------------ | 29| options | [CheckboxOptions](#checkboxoptions对象说明) | 否 | 配置复选框的参数。 | 30 31## CheckboxOptions对象说明 32 33| 名称 | 类型 | 必填 | 描述 | 34| --------| --------| ------ | -------- | 35| name | string | 否 | 用于指定多选框名称。 | 36| group | string | 否 | 用于指定多选框所属群组的名称（即所属CheckboxGroup的名称）。<br/>**说明：** <br/>未配合使用[CheckboxGroup](ts-basic-components-checkboxgroup.md)组件时，此值无用。 | 37 38## 属性 39 40除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 41 42 43| 名称 | 参数类型 | 描述 | 44| ------------- | ------- | -------- | 45| select | boolean | 设置多选框是否选中。<br/>默认值：false<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br />从API version 10开始，该属性支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 46| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置多选框选中状态颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary_activated')。<br/>异常值按照默认值处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 47| unselectedColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 设置多选框非选中状态边框颜色。<br/>默认值：'#33ffffff'。 | 48| mark<sup>10+</sup> | [MarkStyle](#markstyle10对象说明) | 多选框内部图标样式。 | 49| shape<sup>11+</sup> | [CheckBoxShape](#checkboxshape11枚举类型说明) | 设置CheckBox组件形状, 包括圆形和圆角方形。 <br/>默认值：CheckBoxShape.CIRCLE。| 50 51## 事件 52 53支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 54 55| 名称 | 功能描述 | 56| -------------------------------------------- | ------------------------------------------------------------ | 57| onChange(callback: (value: boolean) => void) | 当选中状态发生变化时，触发该回调。<br>- value为true时，表示已选中。<br>- value为false时，表示未选中。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 58 59## MarkStyle<sup>10+</sup>对象说明 60 61| 名称 | 类型 | 必填 | 默认值 | 描述 | 62| ----------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------------------------ | 63| strokeColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.White | 内部图标颜色。 | 64| size | [Length](ts-types.md#length) | 否 | - | 内部图标大小，单位vp。默认大小与多选框组件宽度设置值一致。<br />不支持百分比形式设置。当设置为非法值时，按照默认值处理。 | 65| strokeWidth | [Length](ts-types.md#length) | 否 | 2 | 内部图标粗细，单位vp。不支持百分比形式设置。当设置为非法值时，按照默认值处理。 | 66 67## CheckBoxShape<sup>11+</sup>枚举类型说明 68 69| 枚举名称 | 枚举值 | 描述 | 70| -------------- | ------ | -------- | 71| CIRCLE | 0 | 圆形 | 72| ROUNDED_SQUARE | 1 | 圆角方形 | 73 74## 示例 75 76### 示例1 77 78```ts 79// xxx.ets 80@Entry 81@Component 82struct CheckboxExample { 83 build() { 84 Flex({ justifyContent: FlexAlign.SpaceAround }) { 85 Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) 86 .select(true) 87 .selectedColor(0xed6f21) 88 .shape(CheckBoxShape.CIRCLE) 89 .onChange((value: boolean) => { 90 console.info('Checkbox1 change is' + value) 91 }) 92 Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) 93 .select(false) 94 .selectedColor(0x39a2db) 95 .shape(CheckBoxShape.ROUNDED_SQUARE) 96 .onChange((value: boolean) => { 97 console.info('Checkbox2 change is' + value) 98 }) 99 } 100 } 101} 102``` 103 104 105 106 107### 示例2 108 109```ts 110// xxx.ets 111@Entry 112@Component 113struct Index { 114 115 build() { 116 Row() { 117 Column() { 118 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 119 Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) 120 .selectedColor(0x39a2db) 121 .shape(CheckBoxShape.ROUNDED_SQUARE) 122 .onChange((value: boolean) => { 123 console.info('Checkbox1 change is'+ value) 124 }) 125 .mark({ 126 strokeColor:Color.Black, 127 size: 50, 128 strokeWidth: 5 129 }) 130 .unselectedColor(Color.Red) 131 .width(30) 132 .height(30) 133 Text('Checkbox1').fontSize(20) 134 } 135 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 136 Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) 137 .selectedColor(0x39a2db) 138 .shape(CheckBoxShape.ROUNDED_SQUARE) 139 .onChange((value: boolean) => { 140 console.info('Checkbox2 change is' + value) 141 }) 142 .width(30) 143 .height(30) 144 Text('Checkbox2').fontSize(20) 145 } 146 } 147 .width('100%') 148 } 149 .height('100%') 150 } 151} 152``` 153 154 155 156
