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

作者：韩茹

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

鸿蒙巴士专栏作家

一、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个选择题，每一道题都设置不同的解决形式。

第一道题，当某个单选按钮被选中时，咱们在屏幕两头弹出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();
            }
        });

运行成果：

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

第二题，入选中某个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());
        }

运行成果：

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

第三题，入选中某个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);
            }
        });

运行成果：

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

一、RadioButton

1.1、反对的XML属性

1.2、创立RadioButton

1.3、设置RadioButton

二、RadioContainer

2.1 反对的XML属性

2.2 创立RadioContainer

2.3 设置RadioContainer

三、写个例子

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

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

一、RadioButton

1.1、反对的XML属性

1.2、创立RadioButton

1.3、设置RadioButton

二、RadioContainer

2.1 反对的XML属性

2.2 创立RadioContainer

2.3 设置RadioContainer

三、写个例子

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复