3.5【HarmonyOS鸿蒙开发】组件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"?>
<DirectionalLayoutxmlns: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"><RadioButtonohos:id="$+id:rb_1"ohos:height="40vp"ohos:width="match_content"ohos:text="A.程序咖"ohos:text_size="20fp"/></DirectionalLayout>

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C408zrsa-1625447087352)(https://img.chengxuka.com/radiobuttonyunxing1.gif)]

1.3、设置RadioButton

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

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

<Imageohos: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保证只有一个被选项。--><Textohos:height="match_content"ohos:width="match_parent"ohos:text="请问以下选项中哪一个是女孩子？"ohos:text_size="18fp"ohos:padding="20vp"ohos:background_element="#33ff0000"/><RadioContainerohos: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 --><RadioButtonohos:id="$+id:radio_button_1"ohos:height="40vp"ohos:width="match_content"ohos:text="A.漩涡鸣人"ohos:text_size="18fp"/><RadioButtonohos:id="$+id:radio_button_2"ohos:height="40vp"ohos:width="match_content"ohos:text="B.宇智波佐助"ohos:text_size="18fp"/><RadioButtonohos:id="$+id:radio_button_3"ohos:height="40vp"ohos:width="match_content"ohos:text="C.我爱罗"ohos:text_size="18fp"/><RadioButtonohos: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);

示例代码：

<Textohos:top_margin="20vp"ohos:height="match_content"ohos:width="match_parent"ohos:text="请问你的手机是哪种品牌？"ohos:text_size="18fp"ohos:padding="20vp"ohos:background_element="#33ff0000"/><RadioContainerohos: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 --><RadioButtonohos:id="$+id:radio_button_5"ohos:height="40vp"ohos:width="match_content"ohos:text="A.华为"ohos:text_size="18fp"/><RadioButtonohos:id="$+id:radio_button_6"ohos:height="40vp"ohos:width="match_content"ohos:text="B.水果"ohos:text_size="18fp"/><RadioButtonohos:id="$+id:radio_button_7"ohos:height="40vp"ohos:width="match_content"ohos:text="C.小米"ohos:text_size="18fp"/><RadioButtonohos: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() {@Overridepublic 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"?>
<DirectionalLayoutxmlns: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保证只有一个被选项。--><!--第一题：--><Textohos:height="match_content"ohos:width="match_parent"ohos:text="请问以下选项中哪一个是女孩子？"ohos:text_size="18fp"ohos:padding="20vp"ohos:background_element="#33ff0000"/><RadioContainerohos: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 --><RadioButtonohos:id="$+id:radio_button_1"ohos:height="40vp"ohos:width="match_content"ohos:text="A.漩涡鸣人"ohos:text_size="18fp"/><RadioButtonohos:id="$+id:radio_button_2"ohos:height="40vp"ohos:width="match_content"ohos:text="B.宇智波佐助"ohos:text_size="18fp"/><RadioButtonohos:id="$+id:radio_button_3"ohos:height="40vp"ohos:width="match_content"ohos:text="C.我爱罗"ohos:text_size="18fp"/><RadioButtonohos:id="$+id:radio_button_4"ohos:height="40vp"ohos:width="match_content"ohos:text="D.日向雏田"ohos:text_size="18fp"/></RadioContainer><!--    第二题：xml中我们设置了每个RadioButton的选中状态的颜色为红色--><Textohos:top_margin="20vp"ohos:height="match_content"ohos:width="match_parent"ohos:text="请问你的手机是哪种品牌？"ohos:text_size="18fp"ohos:padding="20vp"ohos:background_element="#33ff0000"/><RadioContainerohos: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 --><RadioButtonohos:id="$+id:radio_button_5"ohos:height="40vp"ohos:width="match_content"ohos:text="A.华为"ohos:text_color_on="#FF0000"ohos:text_size="18fp"/><RadioButtonohos:id="$+id:radio_button_6"ohos:height="40vp"ohos:width="match_content"ohos:text_color_on="#FF0000"ohos:text="B.水果"ohos:text_size="18fp"/><RadioButtonohos:id="$+id:radio_button_7"ohos:height="40vp"ohos:width="match_content"ohos:text_color_on="#FF0000"ohos:text="C.小米"ohos:text_size="18fp"/><RadioButtonohos: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><!--    第三题：--><Textohos:top_margin="20vp"ohos:height="match_content"ohos:width="match_parent"ohos:text="请问你的性别？"ohos:text_size="18fp"ohos:padding="20vp"ohos:background_element="#33ff0000"/><RadioContainerohos: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 --><RadioButtonohos:id="$+id:radio_button_9"ohos:height="40vp"ohos:width="match_content"ohos:text="A.男性"ohos:text_size="18fp"/><RadioButtonohos:id="$+id:radio_button_10"ohos:height="40vp"ohos:width="match_content"ohos:text="B.女性"ohos:text_size="18fp"/><RadioButtonohos:id="$+id:radio_button_11"ohos:height="40vp"ohos:width="match_content"ohos:text="C.其他"ohos:text_size="18fp"/></RadioContainer><Textohos: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开始*/@Overridepublic 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++){//获取每个radiobuttonRadioButton 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() {@Overridepublic 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);}});

运行效果：