鸿蒙开发(11)---RadioButton与RadioContainer组件

简介: 鸿蒙开发(11)---RadioButton与RadioContainer组件

RadioButton与RadioContainer组件


在个人信息的选择中,一般都会涉及到性别的处理。而性别显然是一个单选问题,这种单选情况,在鸿蒙开发中需要使用RadioButton与RadioContainer组件。


本篇,将详细介绍RadioButton与RadioContainer组件的使用规则。


创建单选项

首先,我们用纯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:background_element="#98ffff"
    ohos:orientation="vertical">
    <RadioContainer
        ohos:id="$+id:test_radiocontainer"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="20vp"
        ohos:orientation="vertical">
        <RadioButton
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="25fp"
            ohos:text_color_on="#0066FF"
            ohos:text_color_off="#505050"
            ohos:text="学士"/>
        <RadioButton
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="25fp"
            ohos:text_color_on="#0066FF"
            ohos:text_color_off="#505050"
            ohos:text="硕士"/>
        <RadioButton
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="25fp"
            ohos:text_color_on="#0066FF"
            ohos:text_color_off="#505050"
            ohos:marked="true"
            ohos:text="博士"/>
    </RadioContainer>
</DirectionalLayout>


这里的属性基本在前面的讲解都用到过,这里不在赘述。唯一需要说明的是,因为其是单选项,那么肯定会有一个初始化的选择,而marked可以设置默认选项。


运行之后,效果如下:



这里,只要更改RadioContainer属性orientation为横向纵向,就可以显示出上面的两种效果图。


监听事件

当然,我们使用单选项的目的,是为了获取我们选择的到底是哪个数据。所以,我们需要对RadioContainer组件进行监听。


示例如下:

public class MainAbilitySlice extends AbilitySlice{
    HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");
    private Text radio_text;
    private RadioContainer radioContainer;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.radioContainer=(RadioContainer)findComponentById(ResourceTable.Id_test_radiocontainer);
        this.radio_text=(Text)findComponentById(ResourceTable.Id_radio_text);
        int radio_id=radioContainer.getMarkedButtonId();
        this.radio_text.setText(((RadioButton) radioContainer.getComponentAt(radio_id)).getText());
        this.radioContainer.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
            @Override
            public void onCheckedChanged(RadioContainer radioContainer, int i) {
                radio_text.setText(((RadioButton) radioContainer.getComponentAt(i)).getText());
            }
        });
    }
}


这里,我们通过getMarkedButtonId()获取单选项的默认子组件序号。然后,再通过getComponentAt()获取到RadioButton以及它的值。


同样的,监听选择需要使用CheckedStateChangedListener接口,而获取选中项的值与上面一样。


运行之后,效果如首图所示。

相关文章
|
9天前
|
容器
45.[HarmonyOS NEXT RelativeContainer案例二] 精确控制组件间距:外边距在相对布局中的高级应用
在HarmonyOS NEXT的UI开发中,组件之间的间距控制对于创建美观、易用的界面至关重要。RelativeContainer不仅提供了强大的锚点定位系统,还可以结合外边距(margin)属性实现更精细的布局控制。本教程将详细讲解如何在RelativeContainer中巧妙运用外边距,帮助你掌握这一实用技巧。
63 29
|
9天前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
35 4
|
9天前
|
UED 容器
43.[HarmonyOS NEXT Row案例十一] 构建智能分页控件:Row组件实现页码与翻页按钮的完美结合
分页控件是数据展示类应用中不可或缺的导航元素,它允许用户在大量数据中进行有序浏览。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件创建一个功能完善的分页控件,实现页码显示与前后翻页按钮的完美结合。 分页控件在各类应用场景中广泛应用,如电子商城的商品列表、新闻应用的文章列表、图库应用的图片浏览等。通过合理的设计和交互,可以提升用户的浏览体验和数据访问效率。
30 3
|
9天前
|
数据库 开发者 UED
37.[HarmonyOS NEXT Row案例五] 构建智能聊天气泡:Row组件的reverse属性妙用
在即时通讯应用中,聊天气泡是一个核心UI元素,它需要能够区分发送方和接收方的消息,并以不同的样式和位置显示。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件创建反向排列的消息气泡,重点介绍reverse属性的巧妙应用,帮助开发者构建出专业、美观的聊天界面。
32 3
|
6天前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
27 1
|
6天前
|
JavaScript 前端开发 IDE
鸿蒙开发:了解布局分析ArkUI Inspector
ArkUI Inspector,知名其意,就是UI检查,它可以让开发者在DevEco Studio中快速的查看一个应用在模拟器或者真机上的UI显示效果,并且可以通过查看多次操作后的界面状态,来快速的分析定位UI界面存在的问题。
鸿蒙开发:了解布局分析ArkUI Inspector
|
6天前
|
数据挖掘 测试技术 开发工具
鸿蒙开发:hvigorw,编译构建,实现命令打包
以上呢,就是hvigorw几个常见的命令,主要用于构建不同类型的包,也是接下来流水线打包,几个比较常用的命令,所以拿来重点概述了,当然了hvigorw还有一些常见的命令,大家直接看官网介绍即可,不在多赘述。
鸿蒙开发:hvigorw,编译构建,实现命令打包
|
6天前
|
缓存 开发工具 开发者
鸿蒙开发:了解构建工具hvigorw
hvigorw作为Hvigor的wrapper包装工具,它的主要作用是,支持自动安装Hvigor构建工具和相关插件依赖,以及执行Hvigor构建命令
鸿蒙开发:了解构建工具hvigorw
|
6天前
|
安全 前端开发 开发工具
鸿蒙开发:应用内如何做更新
使用系统的,直接调用检查和显示更新弹窗即可,可以说就两个方法,我们就实现了应用更新的功能,可以说是非常的简单,如果系统的弹窗无法满足您的需求,您可以自定义弹窗,然后实现跳转应用详情页面即可。
鸿蒙开发:应用内如何做更新
|
6天前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
34 0