Checkbox 的简易使用

Checkbox 是 HarmonyOS 中的多选框组件，用于表示某选项的打开或关闭状态。以下是其简易使用方法：

1. 引入与基本使用

在.ets文件中，通过@Entry和@Component装饰器定义组件，在build函数中创建Checkbox实例。例如：

@Entry@Componentstruct CheckboxExample {  build() {    Flex({ justifyContent: FlexAlign.SpaceAround }) {      Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })      .select(true)      .selectedColor(0xed6f21)      .shape(CheckBoxShape.CIRCLE)      .onChange((value: boolean) => {          console.info('Checkbox1 change is' + value)        })    }  }}

2. 常用属性

• **select**：设置多选框是否选中，支持双向绑定变量（API version 10 及以上），默认值为false。

• **selectedColor**：设置选中状态颜色，默认值为$r('sys.color.ohos_id_color_text_primary_activated')。

• **unselectedColor**（API version 10 及以上）：设置非选中状态边框颜色，默认值为$r('sys.color.ohos_id_color_switch_outline_off')。

• **mark**（API version 10 及以上）：设置内部图标样式，API version 12 及以上若设置了indicatorBuilder，则按其内容显示。

• **shape**（API version 11 及以上）：设置组件形状，可选值为CheckBoxShape.CIRCLE（圆形，默认）和CheckBoxShape.ROUNDED_SQUARE（圆角方形）。

• **contentModifier**（API version 12 及以上）：用于定制 CheckBox 内容区，需自定义类实现ContentModifier接口。

3. 事件处理

通过onChange事件监听选中状态变化，回调函数中会返回当前选中状态（true为选中，false为未选中）。例如：

Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).onChange((value: boolean) => {  console.info('Checkbox1 change is' + value)})

4. 示例场景

• 设置多选框形状：可通过shape属性配置为圆形或圆角方形，如示例 1。

• 设置多选框颜色：使用selectedColor、unselectedColor和mark等属性自定义颜色，如示例 2。

• 自定义多选框样式：利用contentModifier属性（API version 12 及以上），结合自定义组件实现复杂样式，如示例 3 中创建了五边形复选框及选中状态变化时的不同显示效果。

总之，Checkbox 组件功能丰富，能满足多种场景下的多选框需求，开发者可根据实际情况灵活运用其属性和事件。