鸿蒙ArkUI Checkbox和CheckboxGroup组件的用法（附带实例）

Checkbox 是多选框组件，通常用于某选项的打开或关闭，示例如下：

// 设置多选框名称、多选框的群组名称
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
    .select(true) // 设置默认选中
    .selectedColor(0xed6f21) // 设置选中颜色
    .onChange((value: boolean) => { // 设置选中事件
        console.info('Checkbox1 change is ' + value)
    })

Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
    .select(false)
    .selectedColor(0x39a2db)
    .onChange((value: boolean) => {
        console.info('Checkbox2 change is ' + value)
    })

Checkbox 在实例化时主要是设置多选框名称、多选框的群组名称，并支持通过 select、selectedColor 来设置是否选中、选中颜色等属性。

示例界面效果如下图所示：


Checkbox 支持 onChange 事件，当 Checkbox 选中状态发生变化时，会触发该回调。当 value 为 true 时，表示已选中；当 value 为 false 时，表示未选中。

CheckboxGroup组件

CheckboxGroup 是多选框群组，用于控制多选框全选或者不全选状态，示例如下：

Row() {
    CheckboxGroup({ group: 'checkboxGroup' })
    Text('全要').fontSize(20)
}

Row() {
    Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
    Text('可乐').fontSize(20)
}

Row() {
    Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
    Text('鸡翅').fontSize(20)
}

checkbox1 和 checkbox2 都是属于同一个 checkboxGroup。当只选中组中的一个 Checkbox 组件时（即不全选），界面效果如下图所示。


当 CheckboxGroup 组件全选中时，界面效果如下图所示。