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。
// 初始化Checkboxprivate 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