【鸿蒙 HarmonyOS】UI 组件 ( 多选按钮 | Checkbox 组件 )

韩曙亮

发布于 2023-03-28 20:23:59

1.6K0

发布于 2023-03-28 20:23:59

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

一、布局文件中配置 Checkbox 组件

Checkbox 组件就是多选按钮 ;

Checkbox 多选按钮之间不存在互斥关系 , 可以同时选择 ;

如 : 给出

个 Checkbox 按钮 , 可以同时选中其中的

个 ,

个 ;

布局文件配置 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:orientation="vertical">

    <Checkbox
        ohos:id="$+id:checkbox0"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="多选按钮 0"
        ohos:text_size="100"/>
</DirectionalLayout>

二、代码中配置 Checkbox 组件选中事件

调用 Checkbox 对象的 setCheckedStateChangedListener 方法设置选中 / 取消选中的 AbsButton.CheckedStateChangedListener 监听器 , 当用户选中 / 取消选中时 , 会回调上述监听器的 onCheckedChanged 方法 , 其中第二个参数 boolean b , b 为 true 多选按钮选中 , false 取消选中 ;

代码示例 :

        // 获取 XML 布局中的 Checkbox 多选按钮
        Checkbox checkbox0 = (Checkbox) findComponentById(ResourceTable.Id_checkbox0);
        checkbox0.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
            @Override
            public void onCheckedChanged(AbsButton absButton, boolean b) {
                // b 为 true 多选按钮选中 , false 取消选中
                if(b) {
                    text.setText("当前 多选按钮 0 选中状态 : 选中");
                }else{
                    text.setText("当前 多选按钮 0 选中状态 : 未选中");
                }
            }
        });

三、完整代码示例

布局文件代码示例 :

<?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">

    <Checkbox
        ohos:id="$+id:checkbox0"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="多选按钮 0"
        ohos:text_size="100"/>

    <Checkbox
        ohos:id="$+id:checkbox1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="多选按钮 1"
        ohos:text_size="100"/>

    <Checkbox
        ohos:id="$+id:checkbox2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="多选按钮 2"
        ohos:text_size="100"/>

    <Text
        ohos:id="$+id:text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="当前 多选按钮 0 选中状态 : 未选中"
        ohos:text_size="50"
        ohos:text_color="#FF0000"/>


</DirectionalLayout>

Java 代码示例 :

package com.example.checkbox.slice;

import com.example.checkbox.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AbsButton;
import ohos.agp.components.Button;
import ohos.agp.components.Checkbox;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        // 获取文本组件
        Text text = (Text) findComponentById(ResourceTable.Id_text);

        // 获取 XML 布局中的 Checkbox 多选按钮
        Checkbox checkbox0 = (Checkbox) findComponentById(ResourceTable.Id_checkbox0);
        checkbox0.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
            @Override
            public void onCheckedChanged(AbsButton absButton, boolean b) {
                // b 为 true 多选按钮选中 , false 取消选中
                if(b) {
                    text.setText("当前 多选按钮 0 选中状态 : 选中");
                }else{
                    text.setText("当前 多选按钮 0 选中状态 : 未选中");
                }
            }
        });

    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

运行结果 :