HarmonyOS —常用组件开发指导-Checkbox

Checkbox可以实现选中和取消选中的功能。

支持的XML属性

Checkbox的共有XML属性继承自：Text

Checkbox的自有XML属性见下表：

创建Checkbox

在layout目录下的xml文件中创建一个Checkbox。

<Checkbox
    ohos:id="$+id:check_box"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:text="This is a checkbox"
    ohos:text_size="20fp" />

图1 Checkbox效果

设置Checkbox

• 在XML中配置Checkbox的选中和取消选中的状态标志样式。layout目录下XML文件的示例代码如下：

<Checkbox
    ...
    ohos:check_element="$graphic:checkbox_check_element" />

graphic目录下创建checkbox_check_element.xml、background_checkbox_checked.xml和background_checkbox_empty.xml三个文件。checkbox_check_element.xml的示例代码如下：

<?xml version="1.0" encoding="utf-8"?>
<state-container xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <item ohos:state="component_state_checked" ohos:element="$graphic:background_checkbox_checked"/>
    <item ohos:state="component_state_empty" ohos:element="$graphic:background_checkbox_empty"/>
</state-container>

background_checkbox_checked.xml的示例代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#00BFC9"/>
</shape>

background_checkbox_empty.xml的示例代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#000000"/>
</shape>

图2 在XML中配置选中和取消选中状态效果

设置Checkbox的文字在选中和取消选中时的颜色。

<Checkbox
    ...
    ohos:text_color_on="#00AAEE"
    ohos:text_color_off="#000000" />

图3 设置Checkbox文字颜色的效果

设置Checkbox的选中状态。

checkbox.setChecked(true);

设置不同状态之间的切换：如果当前为选中状态，那么将变为未选中；如果当前是未选中状态，将变为选中状态。

checkbox.toggle();

设置响应Checkbox状态变更的事件。

// state表示是否被选中
checkbox.setCheckedStateChangedListener((component, state) -> {
    // 状态改变的逻辑
    ...
});

场景实例

使用Checkbox实现多选题的选择效果。

图4 实现多选场景的效果

XML代码示例如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:left_padding="40vp"
    ohos:top_padding="40vp">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="18fp"
            ohos:text="Which of the following are fruits?"/>

        <Text
            ohos:id="$+id:text_answer"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:left_margin="20vp"
            ohos:text_size="20fp"
            ohos:text_color="#FF3333"
            ohos:text="[]" />
    </DirectionalLayout>

    <Checkbox
        ohos:id="$+id:check_box_1"
        ohos:top_margin="40vp"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="A Apples"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF3333"
        ohos:text_color_off="#000000"/>

    <Checkbox
        ohos:id="$+id:check_box_2"
        ohos:top_margin="40vp"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="B Bananas"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF3333"
        ohos:text_color_off="#000000"/>

    <Checkbox
        ohos:id="$+id:check_box_3"
        ohos:top_margin="40vp"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="C Strawberries"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF3333"
        ohos:text_color_off="#000000" />

    <Checkbox
        ohos:id="$+id:check_box_4"
        ohos:top_margin="40vp"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="D Potatoes"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF3333"
        ohos:text_color_off="black" />
</DirectionalLayout>

Java代码示例如下：

// 保存最终选中的结果
private Set<String> selectedSet = new HashSet<>();

// 初始化Checkbox
private void initCheckbox() {
    Checkbox checkbox1 = (Checkbox) findComponentById(ResourceTable.Id_check_box_1);
    checkbox1.setButtonElement(elementButtonInit());
    checkbox1.setCheckedStateChangedListener((component, state) -> {
        if (state) {
            selectedSet.add("A");
        } else {
            selectedSet.remove("A");
        }
        showAnswer();
    });

    Checkbox checkbox2 = (Checkbox) findComponentById(ResourceTable.Id_check_box_2);
    checkbox2.setButtonElement(elementButtonInit());
    checkbox2.setCheckedStateChangedListener((component, state) -> {
        if (state) {
            selectedSet.add("B");
        } else {
           selectedSet.remove("B");
        }
        showAnswer();
    });

    Checkbox checkbox3 = (Checkbox) findComponentById(ResourceTable.Id_check_box_3);
    checkbox3.setButtonElement(elementButtonInit());
    checkbox3.setCheckedStateChangedListener((component, state) -> {
        if (state) {
            selectedSet.add("C");
        } else {
            selectedSet.remove("C");
        }
        showAnswer();
    });

    Checkbox checkbox4 = (Checkbox) findComponentById(ResourceTable.Id_check_box_4);
    checkbox4.setButtonElement(elementButtonInit());
    checkbox4.setCheckedStateChangedListener((component, state) -> {
        if (state) {
            selectedSet.add("D");
        } else {
            selectedSet.remove("D");
        }
        showAnswer();
    });
}

// 设置Checkbox背景
private StateElement elementButtonInit() {
    ShapeElement elementButtonOn = new ShapeElement();
    elementButtonOn.setRgbColor(RgbPalette.RED);
    elementButtonOn.setShape(ShapeElement.OVAL);

    ShapeElement elementButtonOff = new ShapeElement();
    elementButtonOff.setRgbColor(RgbPalette.BLACK);
    elementButtonOff.setShape(ShapeElement.OVAL);

    StateElement checkElement = new StateElement();
    checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, elementButtonOn);
    checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementButtonOff);

    return checkElement;
}

// 显示结果
private void showAnswer() {
    Text answerText = (Text) findComponentById(ResourceTable.Id_text_answer);
    String answer = selectedSet.toString();
    answerText.setText(answer);
}