一、RadioButton 与 RadioContainer 组件

RadioButton 组件就是单选按钮 ;

给出 333 个 RadioButton 按钮 , 使用 RadioContainer 编组后 , 只能 333 选 111 , 同一时刻 , 只能有单个按钮处于选中状态 ;

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

RadioContainer 编组 RadioButton 布局代码示例 :

<?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"><!-- 单选按钮容器 --><RadioContainerohos:id="$+id:radioContainer"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><RadioButtonohos:id="$+id:radioButton1"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="horizontal_center"ohos:text="单选按钮 1"ohos:text_size="100"/><RadioButtonohos:id="$+id:radioButton2"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="horizontal_center"ohos:text="单选按钮 2"ohos:text_size="100"/><RadioButtonohos: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 {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);// 获取文本组件Text text = (Text) findComponentById(ResourceTable.Id_text);// 获取 RadioContainerRadioContainer radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radioContainer);radioContainer.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {@Overridepublic void onCheckedChanged(RadioContainer radioContainer, int i) {text.setText("当前选中 : " + i);}});}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

布局文件 :

<?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"><!-- 单选按钮容器 --><RadioContainerohos:id="$+id:radioContainer"ohos:height="match_content"ohos:width="match_parent"ohos:orientation="vertical"><RadioButtonohos:id="$+id:radioButton1"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="horizontal_center"ohos:text="单选按钮 0"ohos:text_size="100"/><RadioButtonohos:id="$+id:radioButton2"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="horizontal_center"ohos:text="单选按钮 1"ohos:text_size="100"/><RadioButtonohos:id="$+id:radioButton3"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="horizontal_center"ohos:text="单选按钮 2"ohos:text_size="100"/></RadioContainer><Textohos: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

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

3.5【HarmonyOS鸿蒙开发】组件RadioButton和RadioContainer
3.5[HarmonyOS鸿蒙开发]组件RadioButton和RadioContainer 作者:韩茹公司:程序咖(北京)科技有限公司鸿蒙巴士专栏作家一.RadioButton RadioBu ...
【鸿蒙 HarmonyOS】UI 组件 ( Text 组件 )
文章目录一.Text 组件二.Module 准备三.代码示例四.GitHub 地址一.Text 组件 Text 组件是在 UI 界面中显示文本的组件 ; 1. 布局文件中设置 Text : ...
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件绘制布局及 UI 组件
文章目录一.创建 XML 布局文件二.XML 布局文件中添加子组件三.创建 Ability 四.配置 Ability 五.Ability 加载布局文件六.完整代码及效果展示四.GitHub ...
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
文章目录一.布局中设置拖动条 Slider 组件二.代码中控制拖动条 Slider 组件一.布局中设置拖动条 Slider 组件注意该 Slider 组件与进度条 Progressbar 组 ...
【鸿蒙 HarmonyOS】UI 组件 ( 文本输入框 TextField 组件 )
文章目录一.布局中设置 TextField 组件二.代码中获取并设置 TextField 组件一.布局中设置 TextField 组件 TextField 组件是文本输入框 , 允许用户在界面中 ...
鸿蒙os事例代码,鸿蒙HarmonyOS App开发造轮子之自定义圆形图片组件的实例代码
一.背景在采用Java配合xml布局编写鸿蒙app页面的时候,发现sdk自带的Image组件并不能将图片设置成圆形,反复了翻阅了官方API手册(主要查阅了Compont和Image相关的API),起 ...
鸿蒙harmonyOS使用eTS UI时的点击监听问题
鸿蒙harmonyOS使用eTS UI时的点击监听问题文章目录鸿蒙harmonyOS使用eTS UI时的点击监听问题前言一.onClick 二.使用步骤 1.直接调用onClick 2.可以省 ...
【鸿蒙 HarmonyOS】UI 布局 ( 帧布局 StackLayout )
文章目录一.帧布局 StackLayout 一.帧布局 StackLayout 帧布局 StackLayout 可以只设置一个宽度高度属性 , 不设置其它属性 ; 帧布局的特性是可以多层叠加 , 后 ...
【鸿蒙 HarmonyOS】Ability 简介 ( 简介 | 创建应用 | Page Ability 生命周期 )
文章目录一.Ability 简介二.创建应用三.Page Ability 生命周期参考文档 : Page Ability 基本概念 Page Ability 声明周期 AbilitySlice ...

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

文章目录

一、RadioButton 与 RadioContainer 组件

二、监听 RadioContainer 选择事件

三、GitHub 地址

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

最新文章

热门文章