1、Checkbox 是什么？
简单：多选框
官方：可以实现选中和取消选中的功能。
2、简单实现
<Checkbox
ohos:id="$+id:check_box"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="This is a checkbox"
ohos:text_size="20fp" />
3、设置 Checkbox
（1）配置Checkbox的选中和取消选中的状态标志样式
<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）设置Checkbox文字颜色的效果
- 设置Checkbox的文字在选中和取消选中时的颜色
<Checkbox
...
ohos:text_color_on="#00AAEE"
ohos:text_color_off="#000000" />
（3）设置Checkbox的选中状态
checkbox.setChecked(true);
（4）设置不同状态之间的切换：如果当前为选中状态，那么将变为未选中；如果当前是未选中状态，将变为选中状态
checkbox.toggle();
（5） 设置响应Checkbox状态变更的事件
// state表示是否被选中
checkbox.setCheckedStateChangedListener((component, state) -> {
// 状态改变的逻辑
...
});
4、实战：实现多选题的选择效果
public class MainAbilitySlice extends AbilitySlice {
// 保存最终选中的结果
private Set<String> selectedSet = new HashSet<>();
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
initCheckbox();
}
// 初始化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);
}
}
<?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>
