鸿蒙开发(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接口,而获取选中项的值与上面一样。


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

相关文章
|
5天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
58 0
|
5天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
47 1
|
5天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
43 0
|
5天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
54 0
|
5天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
65 0
|
5天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
64 2
|
5天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Scroll容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Scroll容器组件
129 0
|
5天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Row容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Row容器组件
37 1
|
5天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之FlowItem容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之FlowItem容器组件
38 1
|
5天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
65 5

热门文章

最新文章