乐趣区

关于harmonyos:36HarmonyOS鸿蒙开发组件Checkbox

jiezi

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>

成果：

<img src=”https://img.chengxuka.com/checkboxyunxing1.gif” alt=”checkboxyunxing1″ style=”zoom:50%;” />

三、设置 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 中配置选中和勾销选中状态成果：

<img src=”https://img.chengxuka.com/checkboxyunxing2.gif” alt=”checkboxyunxing2″ style=”zoom:70%;” />

2、设置 Checkbox 的文字在选中和勾销选中时的色彩。

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

设置 Checkbox 文字色彩的成果：

<img src=”https://img.chengxuka.com/checkboxyunxing3.gif” alt=”checkboxyunxing3″ style=”zoom:70%;” />

3、设置 Checkbox 的选中状态。

Java 代码中：

checkbox.setChecked(true);

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

Java 代码中：

checkbox.toggle();

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

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

四、写个例子

<img src=”https://img.chengxuka.com/checkboxyunxing4.gif” alt=”checkboxyunxing4″ style=”zoom:50%;” />

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();}

运行即可。

五、全选反选全不选

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

<img src=”https://img.chengxuka.com/checkboxyunxing5.gif” alt=”checkboxyunxing5″ style=”zoom:50%;” />

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、社区：鸿蒙巴士 https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换 QQ 群：714518656

4、视频课：https://www.chengxuka.com

退出移动版