3.6【HarmonyOS鸿蒙开发】组件Checkbox

3.6【HarmonyOS鸿蒙开发】组件Checkbox

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

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

一、支持的XML属性

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

Checkbox的自有XML属性见下表：

属性名称	中文描述	取值	取值说明	使用案例
marked	当前状态（选中或取消选中）	boolean类型	可以直接设置true/false，也可以引用boolean资源。	ohos:marked="true" ohos:marked="$boolean:true"
text_color_on	处于选中状态的文本颜色	color类型	可以直接设置色值，也可以引用color资源。	ohos:text_color_on="#FFFFFFFF" ohos:text_color_on="$color:black"
text_color_off	处于未选中状态的文本颜色	color类型	可以直接设置色值，也可以引用color资源。	ohos:text_color_off="#FFFFFFFF" ohos:text_color_off="$color:black"
check_element	状态标志样式	Element类型	可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。	ohos:check_element="#000000" ohos:check_element="$color:black" ohos:check_element="$media:media_src" ohos:check_element="$graphic:graphic_src"

二、创建Checkbox

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

<?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:padding="20vp"
    ohos:background_element="#33ff0000"
    ohos:orientation="vertical">

    <Checkbox
        ohos:id="$+id:check_box1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="我是一个复选框"
        ohos:text_size="20fp" />


</DirectionalLayout>

效果：

三、设置Checkbox

1、在XML中配置Checkbox的选中和取消选中的状态标志样式。

layout目录下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:padding="20vp"
    ohos:background_element="#33ff0000"
    ohos:orientation="vertical">

    <Checkbox
        ohos:id="$+id:check_box1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="我是一个复选框"
        ohos:text_size="20fp" />
    <Checkbox
        ohos:id="$+id:check_box2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="我是一个🐷"
        ohos:top_margin="20vp"
        ohos:check_element="$graphic:checkbox_check_element"
        ohos:text_size="20fp" />

</DirectionalLayout>

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="#FF0000"/>
</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="#FFFFFF"/>
</shape>
<!--未选中是白色，形状是方块-->

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

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

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

设置Checkbox文字颜色的效果：

3、设置Checkbox的选中状态。

Java代码中：

checkbox.setChecked(true);

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

Java代码中：

checkbox.toggle();

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

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

四、写个例子

1、首先我们在layout目录下新建一个布局文件，demo_checkbox.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="vertical">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="18fp"
            ohos:text="以下哪些是你的兴趣爱好？"/>

        <Text
            ohos:id="$+id:text_answer"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="20fp"
            ohos:text_color="#FF0000"
            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、游戏"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF0000"
        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、金钱"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF0000"
        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、女人"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF0000"
        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、跑车"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF0000"
        ohos:text_color_off="black" />
</DirectionalLayout>

2、然后我们修改MainAbilitySlice.java中代码，首先修改一下要展示的布局文件：

super.setUIContent(ResourceTable.Layout_demo_checkbox);

3、创建一个函数用于设置Checkbox的前面小圆点的背景样式：方块，选中红色，未选中黑色。其实也可以通过xml中设置check_element属性来实现。

		// 设置Checkbox的前面小圆点的背景样式：方块，选中红色，未选中黑色。其实也可以通过xml中设置check_element属性来实现。
    private StateElement elementButtonInit() {
        ShapeElement elementButtonOn = new ShapeElement();
        elementButtonOn.setRgbColor(RgbPalette.RED);
        elementButtonOn.setShape(ShapeElement.RECTANGLE);

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

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

        return checkElement;
    }

4、然后我们创建一个成员变量：

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

5、再提供一个方法，用于将结果展示到Text上。

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

6、然后再创建一个函数，用于初始化Checkbox。

// 初始化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();//展示结果
    });
}

7、最后在onStart()方法中，调用该方法：

		@Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo_checkbox);
        initCheckbox();
    }

运行即可。

五、全选反选全不选

我们再来实现一下全选，全不选和反选。

1、首先在layout目录下新建一个xml布局文件，demo2_checkbox.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:background_element="#eeeeee"
    ohos:left_padding="10vp"
    ohos:right_padding="10vp"
    >


    <Checkbox
        ohos:id="$+id:check_box_1"
        ohos:top_margin="40vp"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="A、吃饭"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF0000"
        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、睡觉"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF0000"
        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、打豆豆"
        ohos:text_size="20fp"
        ohos:text_color_on="#FF0000"
        ohos:text_color_off="#000000" />


    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal">
        <Button
            ohos:id="$+id:btn1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="全选"
            ohos:text_size="20fp"
            ohos:left_padding="20vp"
            ohos:right_padding="20vp"
            ohos:top_padding="10vp"
            ohos:bottom_padding="10vp"
            ohos:background_element="$graphic:capsule_button_element"
            ohos:margin="10vp"
            />
        <Button
            ohos:id="$+id:btn2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="全不选"
            ohos:text_size="20fp"
            ohos:left_padding="20vp"
            ohos:right_padding="20vp"
            ohos:top_padding="10vp"
            ohos:bottom_padding="10vp"
            ohos:background_element="$graphic:capsule_button_element"
            ohos:margin="10vp"
            />
        <Button
            ohos:id="$+id:btn3"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="反选"
            ohos:text_size="20fp"
            ohos:left_padding="20vp"
            ohos:right_padding="20vp"
            ohos:top_padding="10vp"
            ohos:bottom_padding="10vp"
            ohos:margin="10vp"
            ohos:background_element="$graphic:capsule_button_element"
            />

    </DirectionalLayout>

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

2、因为这里我们用了胶囊按钮，所以要在graphic目录下创建按钮的背景文件，capsule_button_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="100"/>
    <solid
        ohos:color="#007CFD"/>
</shape>

3、因为我们是和刚刚上一个例子写在一个项目下的，我们在slice目录下新建一个Slice文件：SecondAbilitySlice.java

/**
 * 思路：
 *
 * 1.先在xml布局文件中，添加复选框标签控件
 *
 * 2.在对应AbilitySlice中，通过findViewById(),找到复选框对象
 *
 * 3.为复选框对象，添加监听
 *
 * 4.操作按钮：当按钮被点击，全选，反选，全不选。
 */

示例代码：

package com.example.hanrucheckbox.slice;

import com.example.hanrucheckbox.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;

import java.util.HashSet;
import java.util.Set;

/**
 * 思路：
 *
 * 1.先在xml布局文件中，添加复选框标签控件
 *
 * 2.在对应AbilitySlice中，通过findViewById(),找到复选框对象
 *
 * 3.为复选框对象，添加监听
 *
 * 4.操作按钮：当按钮被点击，全选，反选，全不选。
 */
public class SecondAbilitySlice  extends  AbilitySlice{
    // 保存最终选中的结果
    private Set<String> selectedSet = new HashSet<>();
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo2_checkbox);

        //1.获取checkbox对象
        Checkbox checkbox1 = (Checkbox) findComponentById(ResourceTable.Id_check_box_1);
        Checkbox checkbox2 = (Checkbox) findComponentById(ResourceTable.Id_check_box_2);
        Checkbox checkbox3 = (Checkbox) findComponentById(ResourceTable.Id_check_box_3);
        //为checkbox添加监听
        checkbox1.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
            @Override
            public void onCheckedChanged(AbsButton absButton, boolean b) {
                if (b) {
                    selectedSet.add("A");
                } else {
                    selectedSet.remove("A");
                }
                showAnswer();
            }
        });
        //或者使用lambda表达式
        checkbox2.setCheckedStateChangedListener((component, state)->{
            if (state) {
                selectedSet.add("B");
            } else {
                selectedSet.remove("B");
            }
            showAnswer();
        });
        checkbox3.setCheckedStateChangedListener((component, state)->{
            if (state) {
                selectedSet.add("C");
            } else {
                selectedSet.remove("C");
            }
            showAnswer();
        });


        //2.获取button对象
        Button btn1 = (Button) findComponentById(ResourceTable.Id_btn1);
        Button btn2 = (Button) findComponentById(ResourceTable.Id_btn2);
        Button btn3 = (Button) findComponentById(ResourceTable.Id_btn3);
        //为按钮添加点击事件
        btn1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                //全选
                checkbox1.setChecked(true);
                checkbox2.setChecked(true);
                checkbox3.setChecked(true);
                selectedSet.add("A");
                selectedSet.add("B");
                selectedSet.add("C");
                showAnswer();

            }
        });

        btn2.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                //全不选
                checkbox1.setChecked(false);
                checkbox2.setChecked(false);
                checkbox3.setChecked(false);
                selectedSet.remove("A");
                selectedSet.remove("B");
                selectedSet.remove("C");
                showAnswer();
            }
        });

        btn3.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                //反选
                checkbox1.toggle();//切换复选框状态
                checkbox2.toggle();
                checkbox3.toggle();
                //先清空selectedSet
                selectedSet.clear();
                //然后判断哪个复选框被选中了
                if(checkbox1.isChecked()){
                    selectedSet.add("A");
                }
                if(checkbox2.isChecked()){
                    selectedSet.add("B");
                }
                if(checkbox3.isChecked()){
                    selectedSet.add("C");
                }
                showAnswer();

            }
        });
    }

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

更多内容：

1、社区：鸿蒙巴士www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交流QQ群：714518656

4、视频课：www.chengxuka.com