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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。