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

101次阅读

共计 11865 个字符,预计需要花费 30 分钟才能阅读完成。

作者:韩茹

公司:程序咖(北京)科技有限公司

鸿蒙巴士专栏作家

一、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

正文完
 0