ArkUI Checkbox多选框组件的用法（附带实例）

Checkbox 是多选框组件，通常用于某选项的打开或关闭。

Checkbox 单独使用时可以表示两种状态之间的切换。示例代码如下：

Row(){
  Checkbox({name:'备选项',group:'sex'})
    .shape(CheckBoxShape.ROUNDED_SQUARE)
    .onChange((val:boolean)=>{
      console.log('修改了多选', val)
    })
  Text('备选项').fontSize(20)
}

Checkbox属性运用

参考以下示例代码：

Row() {
  // 设置 CheckBox 组件形状（圆角方形）并默认选中
  Checkbox({ name: '备选项', group: 'sex' })
    .shape(CheckBoxShape.ROUNDED_SQUARE) // 可选圆形或圆角方形
    .select(true)                        // 默认选中
    .selectedColor('#000fff')            // 选中状态颜色
    .unselectedColor('#ff00ff')          // 未选中状态边框颜色
    .onChange((val: boolean) => {
      console.log('修改了多选', val);
    });

  Text('备选项默认选中').fontSize(20);
}

Row() {
  // 设置 CheckBox 组件形状（圆角方形）并默认未选中
  Checkbox({ name: '备选项', group: 'sex' })
    .shape(CheckBoxShape.ROUNDED_SQUARE)
    .select(false)                       // 默认未选中
    .selectedColor('#000fff')
    .unselectedColor('#ff00ff')
    .onChange((val: boolean) => {
      console.log('修改了多选', val);
    });

  Text('备选项默认未选中').fontSize(20);
}

Checkbox 组件的示例效果如下图所示：

ArkUI CheckboxGroup多选框群组件

CheckboxGroup 是多选框群组，用于控制多选框全选或者不全选状态。

示例代码如下：

Row() {
  // 创建 CheckBox 组，并设置相关样式
  CheckboxGroup({ group: 'city' })
    .selectedColor('#00ff00')  // 设置被选中或部分选中状态的颜色
    .selectAll(false)          // 设置是否全选，默认值为 false；若同组的 checkbox 设置了 select 属性，则 checkbox 的优先级高
    .unselectedColor('#f0f0f0'); // 设置非选中状态边框颜色

  Text('全选').fontSize(20);

  Checkbox({ name: 'city1', group: 'city' })
    .shape(CheckBoxShape.ROUNDED_SQUARE);
  Text('北京').fontSize(20);

  Checkbox({ name: 'city2', group: 'city' })
    .shape(CheckBoxShape.ROUNDED_SQUARE);
  Text('上海').fontSize(20);

  Checkbox({ name: 'city3', group: 'city' })
    .shape(CheckBoxShape.ROUNDED_SQUARE);
  Text('武汉').fontSize(20);
}

CheckboxGroup 组件的示例效果如下图所示：