Checkbox更改样式
============

#### 问题现象

Checkbox组件在交互的过程中有默认样式，但根据界面设计需求，往往需要更改Checkbox的样式使界面更统一或更具辨识度。

*   场景一：如何自定义边框的宽度？
    
    效果如下：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ac/v3/uS_ewSytQOK2aM1BiWKmhg/zh-cn_image_0000002658952183.png?HW-CC-KV=V1&HW-CC-Date=20260709T133937Z&HW-CC-Expire=86400&HW-CC-Sign=2DF4355C60FC545CF05D041CC0FECD9B4A70E32AA44DCBDA2BBA668B04901188 "点击放大")
    
*   场景二：如何修改Checkbox未选择状态时的背景？

#### 背景知识

*   [Checkbox](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-checkbox)：提供多选框组件，通常用于某选项的打开或关闭。
*   [contentModifier](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-checkbox#contentmodifier12)：定制Checkbox内容区的方法。设置该属性时，会导致其他属性设置失效。
*   [CheckBoxConfiguration对象说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-checkbox#checkboxconfiguration12对象说明)：开发者需要自定义class实现ContentModifier接口。继承自[CommonConfiguration](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-content-modifier#commonconfigurationt)。
*   [Circle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-circle)：用于绘制圆形的组件，其[strokeWidth](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-circle#strokewidth)属性可以设置边框宽度。

#### 解决方案

*   场景一：通过contentModifier属性自定义圆形选择框样式，使用Circle组件重绘选择框，设置strokeWidth属性可修改边框宽度。
    
    示例代码如下：
    
    class MyCheckboxStyle implements ContentModifier<CheckBoxConfiguration> {
      selectedColor: ResourceColor = '#0A59F7';
      cx: number = 100;
      cy: number = 100;
      r: number = 100;
      r2: number = 90;
    
    
      constructor(selectedColor: ResourceColor, cx: number, cy: number, r: number, r2: number) {
        this.selectedColor = selectedColor;
        this.cx = cx;
        this.cy = cy;
        this.r = r;
        this.r2 = r2;
      }
    
    
      applyContent(): WrappedBuilder<\[CheckBoxConfiguration\]> {
        return wrapBuilder(buildCheckbox);
      }
    }
    
    
    @Entry
    @Component
    struct CheckboxDemo {
      @State checkSelect: boolean = false;
    
    
      build() {
        Column() {
          Text(\`复选框状态${this.checkSelect ? '（ 选中 ）' : '（ 非选中 ）'}\`).margin({ bottom: 10 });
          Checkbox({ name: '复选框状态', group: 'checkboxGroup' })
            .select($$this.checkSelect)
            .contentModifier(new MyCheckboxStyle('#0A59F7', 100, 120, 100, 80)) /_/ 自定义选择框样式_
            .onChange((value: boolean) => {
              console.info(\`Checkbox change is${value}\`);
            });
        }
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.Center)
        .height('100%')
        .width('100%');
      }
    }
    
    
    @Builder
    function buildCheckbox(config: CheckBoxConfiguration) {
      Circle()
        .fill(config.selected ? (config.contentModifier as MyCheckboxStyle).selectedColor : Color.White)
        .width(50)
        .height(50)
        .strokeWidth(5) _// 设置边框宽度_
        .stroke('#000') /_/ 设置边框颜色_
        .onClick(() => {
          config.triggerChange(!config.selected);
        });
    }
    
    示例代码运行效果如下：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1f/v3/7Z-TqdAZQtiQVcg0QNUqHw/zh-cn_image_0000002628592970.png?HW-CC-KV=V1&HW-CC-Date=20260709T133937Z&HW-CC-Expire=86400&HW-CC-Sign=5DD2BCE3A78C361992AD5483A4207768D2C8207144BC08A10EDDBE6998DE83DC "点击放大")
    

*   场景二：通过contentModifier属性自定义圆形选择框样式，传入未选中时的默认背景图片，在点击事件中对当前背景图片进行取反，且使用CheckBoxConfiguration的triggerChange方法触发多选框选中状态变化从而实现背景的修改。
    
    示例代码如下：
    
    class MyCheckboxStyleTwo implements ContentModifier<CheckBoxConfiguration> {
      selectedColor: Resource;
    
    
      constructor(selectedColor: Resource) {
        this.selectedColor = selectedColor;
      }
    
    
      applyContent(): WrappedBuilder<\[CheckBoxConfiguration\]> {
        return wrapBuilder(buildCheckboxTwo);
      }
    }
    
    
    @Entry
    @Component
    struct ModifierCheckBoxTwo {
      build() {
        Row() {
          Column() {
            Checkbox({ name: '复选框状态', group: 'checkboxGroup' })
              .contentModifier(new MyCheckboxStyleTwo($r('app.media.green'))) _// 自定义选择框样式，根据具体场景传入默认背景_
              .onChange((value: boolean) => {
                console.info(\`Checkbox change is${value}\`);
              });
          }
          .width('100%');
        }
        .height('100%');
      }
    }
    
    
    @Builder
    function buildCheckboxTwo(config: CheckBoxConfiguration) {
      Column() {
        Text(config.name + (config.selected ? '（选中）' : '（非选中）')).margin({ bottom: 8 });
        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
        }
        .onClick(() => {
         _ // 对当前背景图片进行取反操作_
          (config.contentModifier as MyCheckboxStyleTwo).selectedColor =
            !config.selected ? $r('app.media.startIcon') : $r('app.media.background'); _// 根据具体场景加载资源_
       _   // 判断多选框的选择状态_
          config.triggerChange(!config.selected);
        })
        .width(50)
        .height(50)
        .borderRadius(5)
        .backgroundImageSize({ width: '100%', height: '100%' })
        /_/ 示例效果：未选中状态时的背景图片为绿色图片，经过自定义后未选中状态时的背景图片为蓝色图片_
        .backgroundImage((config.contentModifier as MyCheckboxStyleTwo).selectedColor); _// 设置背景，根据具体场景加载资源_
      };
    }
    
    示例代码运行效果如下：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/53/v3/nFBnrP4vRWiHUkLpXoeiAw/zh-cn_image_0000002658832225.png?HW-CC-KV=V1&HW-CC-Date=20260709T133937Z&HW-CC-Expire=86400&HW-CC-Sign=BEB957B7B8B9B629E8949051DDF533B80ED07AAA1EE1E6044966D49390828005 "点击放大")
    

#### 常见FAQ

Q：如何为Checkbox组件设置选中颜色？

A：可以使用[selectedColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-checkbox#selectedcolor)属性来设置Checkbox选中时的颜色，参考官方文档：[示例2(设置多选框颜色)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-checkbox#示例2设置多选框颜色)实现。

Q：已经通过shape([CheckBoxShape](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enums#checkboxshape11).ROUNDED\_SQUARE)属性给Checkbox设置了圆角方形，如何改变圆角大小？

A：参考官方文档：[示例3(自定义多选框样式)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-checkbox#示例3自定义多选框样式)实现。