鸿蒙checkbox修改默认样式和字体颜色_ohos:check_element

改变默认样式

鸿蒙的默认checkout样式是这样的：

这跟android默认的不一样，有时候我们需要实现类似这样的需求：

这就需要我们自定义设置，这里记录一下如果实现；

主要使用checkbox中的下面属性

ohos:check_element="$graphic:register_select"

我们需要自定义一个graphic,这个类似于andorid中的drawable:

register_select.xml

<?xml version="1.0" encoding="utf-8"?>
<state-container
    xmlns:ohos="http://schemas.huawei.com/res/ohos">
//选中的状态
    <item ohos:element="$media:register_select_on" ohos:state="component_state_checked"/>
//未选中的状态
    <item ohos:element="$media:register_select" ohos:state="component_state_empty"/>
</state-container>

然后在checkbox中使用

    <Checkbox
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="我已阅读并同意"
        ohos:check_element="$graphic:register_select"
        ohos:text_size="12fp"
        ohos:left_margin="10vp"
        />

这样就改变了默认样式：

改变字体颜色

如果想要字体颜色也根据选中状态改变的话，鸿蒙系统也提供了属性，注意不能使用ohos:text_color这个属性，这个亲测好像只会改变未选中状态的字体颜色，选中后会回到默认的黑色，而且鸿蒙系统中不能像android那样新建color文件夹；

后面发现鸿蒙默认提供了两个设置状态的属性，可以设置这两个属性改变不通状态的颜色：

ohos:text_color_off="$color:login_text" //未选中状态
ohos:text_color_on="$color:bt_login" //选中状态

   <Checkbox
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="我已阅读并同意"
        ohos:check_element="$graphic:register_select"
        ohos:text_size="12fp"
        ohos:text_color_off="$color:login_text"
        ohos:text_color_on="$color:bt_login"
        ohos:left_margin="10vp"
        />

未选中效果：

选中效果：