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。
<Checkbox ohos:id="$+id:check_box" ohos:height="match_content" ohos:width="match_content" ohos:text="This is a checkbox" ohos:text_size="20fp" />
图1 Checkbox效果
设置Checkbox
在XML中配置Checkbox的选中和取消选中的状态标志样式。
layout目录下XML文件的示例代码如下：
<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 在XML中配置选中和取消选中状态效果
设置Checkbox的文字在选中和取消选中时的颜色。
<Checkbox ... ohos:text_color_on="#00AAEE" ohos:text_color_off="#000000" />图3 设置Checkbox文字颜色的效果
设置Checkbox的选中状态。
checkbox.setChecked(true);设置不同状态之间的切换：如果当前为选中状态，那么将变为未选中；如果当前是未选中状态，将变为选中状态。
checkbox.toggle();设置响应Checkbox状态变更的事件。
// state表示是否被选中checkbox.setCheckedStateChangedListener((component, state) -> { // 状态改变的逻辑 ...});
场景实例
使用Checkbox实现多选题的选择效果。
图4 实现多选场景的效果
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="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>Java代码示例：
// 保存最终选中的结果private Set<String> selectedSet = new HashSet<>();// 初始化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(); });}// 设置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);}