乐趣区

关于harmonyos:35HarmonyOS鸿蒙开发组件RadioButton和RadioContainer

jiezi

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

一、RadioButton

RadioButton 用于多选一的操作，须要搭配 RadioContainer 应用，实现单选成果。

1.1、反对的 XML 属性

RadioButton 的共有 XML 属性继承自：Text

RadioButton 的自有 XML 属性见下表：

属性名称 中文形容 取值 取值阐明 应用案例
marked 以后状态 boolean 类型 能够间接设置 true/false，也能够援用 boolean 资源。 ohos:marked=”true”
ohos:marked=”$boolean:true”
text_color_on 处于选中状态的文本色彩 color 类型 能够间接设置色值，也能够援用 color 资源。 ohos:text_color_on=”#FFFFFFFF”
ohos:text_color_on=”$color:black”
text_color_off 处于未选中状态的文本色彩 color 类型 能够间接设置色值，也能够援用 color 资源。 ohos:text_color_off=”#FFFFFFFF”
ohos:text_color_off=”$color:black”
check_element 状态标记款式 Element 类型 可间接配置色值，也可援用 color 资源或援用 media/graphic 下的图片资源。 ohos:check_element=”#000000″
ohos:check_element=”$color:black“
ohos:check_element=”$media:media_src“
ohos:check_element=”$graphic:graphic_src“

1.2、创立 RadioButton

在 layout 目录下的 xml 文件中创立 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"
    ohos:background_element="#33666600"
    ohos:padding="20vp"
    >

    <RadioButton
        ohos:id="$+id:rb_1"
        ohos:height="40vp"
        ohos:width="match_content"
        ohos:text="A. 程序咖"
        ohos:text_size="20fp"/>

</DirectionalLayout>

效果图：

1.3、设置 RadioButton

设置单选按钮的字体色彩：

在 xml 中设置：text_color_on 为选中状态的字体色彩，text_color_off 为未选中状态的字体色彩。

<Image
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="center"
        ohos:top_margin="20vp"
        ohos:image_src="$media:chengxuka"
        ohos:alpha="0.5"
        />

设置单选按钮字体色彩成果：

也能够在 Java 代码中设置：

    rBtn.setTextColorOn(new Color(Color.getIntColor("#0066FF")));
    rBtn.setTextColorOff(new Color(Color.getIntColor("#505050")));

二、RadioContainer

RadioContainer 是 RadioButton 的容器，在其包裹下的 RadioButton 保障只有一个被选项。

2.1 反对的 XML 属性

RadioContainer 的共有 XML 属性继承自：DirectionalLayout

2.2 创立 RadioContainer

在 layout 目录下的 xml 文件创建 RadioContainer，并在 RadioContainer 中创立 RadioButton。

<!--RadioContainer 是 RadioButton 的容器，在其包裹下的 RadioButton 保障只有一个被选项。-->

    <Text

        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="请问以下选项中哪一个是女孩子？"
        ohos:text_size="18fp"
        ohos:padding="20vp"
        ohos:background_element="#33ff0000"
        />
    
    <RadioContainer
        ohos:id="$+id:radio_container"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:left_padding="20vp"
        ohos:bottom_padding="20vp"
        ohos:right_padding="20vp"
        ohos:background_element="#33ff0000"
        >
        <!-- 搁置多个 RadioButton -->
        <RadioButton
            ohos:id="$+id:radio_button_1"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A. 漩涡鸣人"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_2"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="B. 宇智波佐助"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_3"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="C. 我爱罗"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_4"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="D. 日向雏田"
            ohos:text_size="18fp"/>

    </RadioContainer>

成果：

咱们也能够设置 RadioButton 的布局方向：orientation 设置为“horizontal”，示意横向布局；orientation 设置为“vertical”，示意纵向布局。默认为纵向布局。

在 xml 中设置：

<RadioContainer
    ...
    ohos:orientation="horizontal">
    ...
</RadioContainer>

或者在 Java 代码中设置：

container.setOrientation(Component.HORIZONTAL);

示例代码：

<Text
        ohos:top_margin="20vp"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="请问你的手机是哪种品牌？"
        ohos:text_size="18fp"
        ohos:padding="20vp"
        ohos:background_element="#33ff0000"
        />

    <RadioContainer
        ohos:id="$+id:radio_container2"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:left_padding="20vp"
        ohos:bottom_padding="20vp"
        ohos:right_padding="20vp"
        ohos:orientation="horizontal"
        ohos:background_element="#33ff0000"
        >
        <!-- 搁置多个 RadioButton -->
        <RadioButton
            ohos:id="$+id:radio_button_5"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A. 华为"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_6"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="B. 水果"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_7"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="C. 小米"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_8"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="D. 魅族"
            ohos:text_size="18fp"/>

    </RadioContainer>

效果图：

2.3 设置 RadioContainer

设置响应 RadioContainer 状态扭转的事件。

RadioContainer container = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);
container.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
    @Override
    public void onCheckedChanged(RadioContainer radioContainer, int index) {}});

依据索引值设置指定 RadioButton 为选定状态。

container.mark(0);

革除 RadioContainer 中所有 RadioButton 的选定状态。

container.cancelMarks();

三、写个例子

咱们设置了 3 个选择题，每一道题都设置不同的解决形式。

<img src=”https://img.chengxuka.com/WX20210609-141108@2x.png/mark” alt=”WX20210609-141108@2x” style=”zoom:50%;” />

第一道题，当某个单选按钮被选中时，咱们在屏幕两头弹出 ToastDialog 吐司对话框。

第二道题，当某个单选按钮被选中时，咱们更改被选中的单选按钮的色彩。

第三道题，咱们获取被选中的单选按钮的文本内容，显示在上面的 Text 中。

首先咱们先实现 layout 目录下的 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:orientation="vertical"
    ohos:background_element="#33666600"
    ohos:padding="20vp"
    >

<!--RadioContainer 是 RadioButton 的容器，在其包裹下的 RadioButton 保障只有一个被选项。-->

<!-- 第一题：-->
    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="请问以下选项中哪一个是女孩子？"
        ohos:text_size="18fp"
        ohos:padding="20vp"
        ohos:background_element="#33ff0000"
        />
    
    <RadioContainer
        ohos:id="$+id:radio_container"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:left_padding="20vp"
        ohos:bottom_padding="20vp"
        ohos:right_padding="20vp"
        ohos:background_element="#33ff0000"
        >
        <!-- 搁置多个 RadioButton -->
        <RadioButton
            ohos:id="$+id:radio_button_1"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A. 漩涡鸣人"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_2"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="B. 宇智波佐助"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_3"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="C. 我爱罗"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_4"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="D. 日向雏田"
            ohos:text_size="18fp"/>

    </RadioContainer>


<!--    第二题：xml 中咱们设置了每个 RadioButton 的选中状态的色彩为红色 -->
    <Text
        ohos:top_margin="20vp"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="请问你的手机是哪种品牌？"
        ohos:text_size="18fp"
        ohos:padding="20vp"
        ohos:background_element="#33ff0000"
        />

    <RadioContainer
        ohos:id="$+id:radio_container2"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:left_padding="20vp"
        ohos:bottom_padding="20vp"
        ohos:right_padding="20vp"
        ohos:orientation="horizontal"
        ohos:background_element="#33ff0000"
        >
        <!-- 搁置多个 RadioButton -->
        <RadioButton
            ohos:id="$+id:radio_button_5"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A. 华为"
            ohos:text_color_on="#FF0000"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_6"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text_color_on="#FF0000"
            ohos:text="B. 水果"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_7"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text_color_on="#FF0000"
            ohos:text="C. 小米"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_8"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text_color_on="#FF0000"
            ohos:text="D. 魅族"
            ohos:text_size="18fp"/>

    </RadioContainer>

<!--    第三题：-->
    <Text
        ohos:top_margin="20vp"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="请问你的性别？"
        ohos:text_size="18fp"
        ohos:padding="20vp"
        ohos:background_element="#33ff0000"
        />

    <RadioContainer
        ohos:id="$+id:radio_container3"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:left_padding="20vp"
        ohos:bottom_padding="20vp"
        ohos:right_padding="20vp"
        ohos:orientation="horizontal"
        ohos:background_element="#33ff0000"
        >
        <!-- 搁置多个 RadioButton -->
        <RadioButton
            ohos:id="$+id:radio_button_9"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A. 男性"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_10"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="B. 女性"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_11"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="C. 其余"
            ohos:text_size="18fp"/>

    </RadioContainer>
    <Text
        ohos:id="$+id:text_checked"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="20fp"
        ohos:top_margin="20vp"
        ohos:text="[你的性别：]"
        ohos:text_color="#FF3333"/>


</DirectionalLayout>

而后在 MainAbilitySlice.java 中，咱们在 onStart() 办法中，咱们增加代码实现，先来第一题，说一下思路：

 第一题思路：咱们打算当某个 RadioButton 被选中的时候，在屏幕两头弹出吐司 ToastDialog，显示的内容为被选中的选项文本以及正确或者谬误的答案。step1，咱们先依据监听事件中的 index 参数，获取被选中的 RadioButton 对象
step2，获取该对象的文本内容
step3，判断正确
step4，创立 ToastDialog 对象，并 show() 显示进去。

示例代码：

// 第一题：设置吐司
        //1. 获取 RadioContainer 对象
        RadioContainer container = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);
        //2. 设置响应 RadioContainer 状态扭转的事件。container.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
            /**
             *
             * @param radioContainer，单选按钮组对象
             * @param index，被选中的 RadioButton 的下标序号，从 0 开始
             */
            @Override
            public void onCheckedChanged(RadioContainer radioContainer, int index) {
                // 依据被选中的 RadioButton 的下标序号，获取 RadioButton 对象
                RadioButton radioButton = (RadioButton)radioContainer.getComponentAt(index);
                // 获取文本内容
                String text = radioButton.getText();
                String result = index == 3?"正确":"谬误";
                // 设置 Toast 吐司
                new ToastDialog((getContext()))
                        .setText(text+"，答案："+result)
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();}
        });

运行成果：

<img src=”https://img.chengxuka.com/radiobuttonyunxing3.gif” alt=”radiobuttonyunxing3″ style=”zoom:50%;” />

第二题，咱们先说一下思路：

 第二题，入选中某个 RadioButton 时，扭转被选中的 RadioButton 的色彩为红色。有一点咱们先阐明一下：在 xml 布局中，咱们是能够通过以下两个属性来设置某个 RadioButton 选中和没有选中的色彩的。ohos:text_color_on=""ohos:text_color_off=""
然而这个只是针对文本色彩，单选按钮后面的小圆点，没有选中的时候默认是红色，选中了默认是彩色。咱们这里心愿它变成红色，那文本色彩通过 text_color_on 属性即可实现。代码中要解决的就是被选中时，小圆点变成红色。step1，咱们当初 xml 布局文件中的每个 RadioButton 中，设置被选中的文本色彩为红色：ohos:text_color_on="#FF0000"
step2，借助于 ShapeElement 类，它提供具备色彩突变的元素实例，该突变通常用于组件背景。step3，借助于 StateElement 类，它提供能够依据组件状态更改的元素对象。

Java 代码实现，首先咱们先创立一个函数用于创立 StateElement 对象。该对象有两种状态，选中和没被选中的色彩是不一样的。示例代码：

        // 通过以下办法，定义 RadioButton 的选中和非选中的小圆点的背景色。选中为红色，否则为红色。private StateElement createStateElement(){
        // 提供具备色彩突变的元素实例，该突变通常用于组件背景。ShapeElement elementButtonOn = new ShapeElement();
        // 设置选中状态的小圆点为红色
        elementButtonOn.setRgbColor(RgbPalette.RED);
        // 设置形态，椭圆
        elementButtonOn.setShape(ShapeElement.OVAL);


        ShapeElement elementButtonOff = new ShapeElement();
        elementButtonOff.setRgbColor(RgbPalette.WHITE);
        elementButtonOff.setShape(ShapeElement.OVAL);

        // 提供能够依据组件状态更改的元素对象。StateElement checkElement = new StateElement();
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED},elementButtonOn);
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY},elementButtonOff);
        return checkElement;
    }

而后解决 RadioContainer，先获取外面所有的 RadioButton，而后为每个 RadioButton 设置元素对象。

                // 第二题，设置选中单选按钮的状态
        //1. 获取 RadioContainer 对象
        RadioContainer container2 = (RadioContainer) findComponentById(ResourceTable.Id_radio_container2);
        //2. 设置被选中的 radioButton 为红色，其余的为红色
        // 先获取 radiobutton 的个数
        int count = container2.getChildCount();
        // 循环
        for(int i=0;i<count;i++){
            // 获取每个 radiobutton
            RadioButton radioButton = (RadioButton)container2.getComponentAt(i);
            // 为光标所在的气泡设置元素对象。radioButton.setButtonElement(createStateElement());
        }

运行成果：

<img src=”https://img.chengxuka.com/radiobuttonyunxing4.gif” alt=”radiobuttonyunxing4″ style=”zoom:50%;” />

第三题，还是先来说一下思路，

 第三题，入选中某个 RadioButton 时，咱们心愿可能取出它的文本内容，显示到某个 Text 中。这个和第一题到思路有点像，只不过第一题是将文本信息通过 ToastDialog 的模式展示，而第三题是设置到 Text 上。step1，咱们先依据监听事件中的 index 参数，获取被选中的 RadioButton 对象
step2，获取该对象的文本内容
step3，将它显示到 Text 上。

Java 代码局部：

 // 第三题，设置文本
        //1. 获取 RadioContainer 对象和 Text 对象
        RadioContainer container3 = (RadioContainer) findComponentById(ResourceTable.Id_radio_container3);
        Text text_checked = (Text) findComponentById(ResourceTable.Id_text_checked);

        //2. 获取被选中的 radio 的文本内容
        container3.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
            @Override
            public void onCheckedChanged(RadioContainer radioContainer, int index) {
                // 依据被选中的 RadioButton 的下标序号，获取 RadioButton 对象
                RadioButton radioButton = (RadioButton)radioContainer.getComponentAt(index);
                // 获取文本内容
                String msg = "[ 你的性别：";
                String text = radioButton.getText();
                msg += text+"]";
                switch (index){
                    case 0:
                        msg += "，呀，是个汉子";
                        break;
                    case 1:
                        msg += "，呀，是个女汉子";
                        break;
                    case 2:
                        msg += "，呃，人妖嚒。。。";
                        break;
                }
                text_checked.setText(msg);
            }
        });

运行成果：

<img src=”https://img.chengxuka.com/radiobuttonyunxing5.gif” alt=”radiobuttonyunxing5″ style=”zoom:50%;” />

更多内容：

1、社区：鸿蒙巴士 https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换 QQ 群：714518656

4、视频课：https://www.chengxuka.com

退出移动版