提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

【鸿蒙 HarmonyOS】UI 组件 ( 单选按钮 | RadioButton 与 RadioContainer 组件 )

组件鸿蒙UI 按钮 HarmonyOS 单选 RadioButton
2023-06-13 09:17:48 时间

文章目录

一、RadioButton 与 RadioContainer 组件

RadioButton 组件就是单选按钮 ;

给出

3

个 RadioButton 按钮 , 使用 RadioContainer 编组后 , 只能

3

选

1

, 同一时刻 , 只能有单个按钮处于选中状态 ;

RadioContainer 组件是单选按钮的编组组件 , 可以将若干 RadioButton 放到 RadioContainer 标签中 , 这些 RadioButton 组件只能有一个处于选中状态 ;

RadioContainer 编组 RadioButton 布局代码示例 :

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

    <!-- 单选按钮容器 -->
    <RadioContainer
        ohos:id="$+id:radioContainer"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical">

        <RadioButton
            ohos:id="$+id:radioButton1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:text="单选按钮 1"
            ohos:text_size="100"/>

        <RadioButton
            ohos:id="$+id:radioButton2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:text="单选按钮 2"
            ohos:text_size="100"/>

        <RadioButton
            ohos:id="$+id:radioButton3"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:text="单选按钮 3"
            ohos:text_size="100"/>

    </RadioContainer>

</DirectionalLayout>

显示样式 : 当前单选按钮 2 处于选中状态 ;

下图是使用远程鸿蒙模拟器显示单选按钮 ;

二、监听 RadioContainer 选择事件

调用 RadioContainer 对象的 setMarkChangedListener 方法 , 给 RadioContainer 添加 RadioContainer.CheckedStateChangedListener 监听器 , 可以监听编组在 RadioContainer 下的所有 RadioButton 的选择事件 ;

当某个 RadioButton 被点击时 , 会回调 RadioContainer.CheckedStateChangedListener 监听器的 onCheckedChanged 方法 , 在该方法的第二个参数 int i , 就是被点击的 RadioBtton 的索引 ;

代码示例 :

package com.example.radiobutton.slice;

import com.example.radiobutton.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.RadioContainer;
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);

        // 获取 RadioContainer
        RadioContainer radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radioContainer);
        radioContainer.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
            @Override
            public void onCheckedChanged(RadioContainer radioContainer, int i) {
                text.setText("当前选中 : " + i);
            }
        });

    }

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

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

布局文件 :

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

    <!-- 单选按钮容器 -->
    <RadioContainer
        ohos:id="$+id:radioContainer"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="vertical">

        <RadioButton
            ohos:id="$+id:radioButton1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:text="单选按钮 0"
            ohos:text_size="100"/>

        <RadioButton
            ohos:id="$+id:radioButton2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:text="单选按钮 1"
            ohos:text_size="100"/>

        <RadioButton
            ohos:id="$+id:radioButton3"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:text="单选按钮 2"
            ohos:text_size="100"/>

    </RadioContainer>

    <Text
        ohos:id="$+id:text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="当前选中 : "
        ohos:text_size="100"
        ohos:text_color="#FF0000"/>

</DirectionalLayout>

执行结果 :

三、GitHub 地址

GitHub 主应用 : https://github.com/han1202012/HarmonyHelloWorld

RadioButton 与 RadioContainer 组件示例 Module : https://github.com/han1202012/HarmonyHelloWorld/tree/master/radiobutton

相关文章