Harmony OS — Checkbox多选框

文章目录

1、Checkbox 是什么？
2、简单实现
3、设置 Checkbox
4、实战：实现多选题的选择效果
5、了解更多

1、Checkbox 是什么？

简单：多选框
官方：可以实现选中和取消选中的功能。

2、简单实现

<Checkboxohos: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"><solidohos: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"><solidohos: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<>();@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);initCheckbox();}// 初始化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);}
}

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns: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"><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:orientation="horizontal"><Textohos:height="match_content"ohos:width="match_content"ohos:text_size="18fp"ohos:text="Which of the following are fruits?"/><Textohos: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><Checkboxohos: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"/><Checkboxohos: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"/><Checkboxohos: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" /><Checkboxohos: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>

5、了解更多

Checkbox 了解更多

Harmony OS — Checkbox多选框相关推荐

android勾选控件_Android中CheckBox复选框控件使用方法详解
CheckBox复选框控件使用方法,具体内容如下一.简介 1. 2.类结构图二.CheckBox复选框控件使用方法这里是使用java代码在LinearLayout里面添加控件 1.新建Linea ...
Flying Saucer 不支持中文，换行，粗体，CheckBox多选框的解决方案
最近要生成打印版的保单信息,内容比较多,也比较复杂,iText直接生成的话,想必花很多时间,而且可能也很难维护,偶然看到了HTML 在 Fly Saucer的帮助下能转换成PDF,解析CSS还不错,顿 ...
js checkbox复选框实现单选功能
本文仅供学习交流使用,demo下载见文末 js checkbox复选框实现单选功能 <script type="text/javascript">$(":ch ...
checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
js获取checkbox复选框获取选中的选项
分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数. js实现: var form = document. ...
Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框
1.Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目配置项类型说明 boxLabel String 紧靠复选框的文字描述 boxLabelAl ...
checkbox取值 php_php获取checkbox复选框的内容
由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. 复选二复选三复选 ...
html5复选框控制按钮状态,HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件...
本篇教程探讨了HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < ...
html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
Flutter Checkbox 复选框
Flutter 复选框有两种:一是精简版Checkbox复选框 ,二是自带标题和副标题CheckboxListTile复选框参数详解属性说明 Checkbox 复选框 value 是否选中此 ...