鸿蒙开发按钮 3.5，HarmonyOS鸿蒙开发组件RadioButton和RadioContainer

作者：韩茹

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

鸿蒙巴士专栏作家

RadioButton用于多选一的操作，需要搭配RadioContainer使用，实现单选效果。

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

RadioButton的自有XML属性见下表：

在layout目录下的xml文件中创建RadioButton。

<?xml version="1.0" encoding="utf-8"?>br<DirectionalLayoutbr xmlns:ohos="http://schemas.huawei.com/res/ohos"br ohos:height="match_parent"br ohos:width="match_parent"br ohos:orientation="vertical"br ohos:background_element="#33666600"br ohos:padding="20vp"br >brbr <RadioButtonbr ohos:id="$ id:rb_1"br ohos:height="40vp"br ohos:width="match_content"br ohos:text="A.程序咖"br ohos:text_size="20fp"/>brbr</DirectionalLayout>

效果图：

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

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

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

设置单选按钮字体颜色效果：

也可以在Java代码中设置：

rBtn.setTextColorOn(new Color(Color.getIntColor("#0066FF")));br rBtn.setTextColorOff(new Color(Color.getIntColor("#505050")));二、RadioContainer

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

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

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

<!--RadioContainer是RadioButton的容器，在其包裹下的RadioButton保证只有一个被选项。-->brbr <Textbrbr ohos:height="match_content"br ohos:width="match_parent"br ohos:text="请问以下选项中哪一个是女孩子？"br ohos:text_size="18fp"br ohos:padding="20vp"br ohos:background_element="#33ff0000"br />br br <RadioContainerbr ohos:id="$ id:radio_container"br ohos:height="match_content"br ohos:width="match_parent"br ohos:left_padding="20vp"br ohos:bottom_padding="20vp"br ohos:right_padding="20vp"br ohos:background_element="#33ff0000"br >br <!-- 放置多个RadioButton -->br <RadioButtonbr ohos:id="$ id:radio_button_1"br ohos:height="40vp"br ohos:width="match_content"br ohos:text="A.漩涡鸣人"br ohos:text_size="18fp"/>br <RadioButtonbr ohos:id="$ id:radio_button_2"br ohos:height="40vp"br ohos:width="match_content"br ohos:text="B.宇智波佐助"br ohos:text_size="18fp"/>br <RadioButtonbr ohos:id="$ id:radio_button_3"br ohos:height="40vp"br ohos:width="match_content"br ohos:text="C.我爱罗"br ohos:text_size="18fp"/>br <RadioButtonbr ohos:id="$ id:radio_button_4"br ohos:height="40vp"br ohos:width="match_content"br ohos:text="D.日向雏田"br ohos:text_size="18fp"/>brbr </RadioContainer>br

效果：

我们也可以设置RadioButton的布局方向：orientation设置为“horizontal”，表示横向布局；orientation设置为“vertical”，表示纵向布局。默认为纵向布局。

在xml中设置：

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

或者在Java代码中设置：

container.setOrientation(Component.HORIZONTAL);

示例代码：

<Textbr ohos:top_margin="20vp"br ohos:height="match_content"br ohos:width="match_parent"br ohos:text="请问你的手机是哪种品牌？"br ohos:text_size="18fp"br ohos:padding="20vp"br ohos:background_element="#33ff0000"br />brbr <RadioContainerbr ohos:id="$ id:radio_container2"br ohos:height="match_content"br ohos:width="match_parent"br ohos:left_padding="20vp"br ohos:bottom_padding="20vp"br ohos:right_padding="20vp"br ohos:orientation="horizontal"br ohos:background_element="#33ff0000"br >br <!-- 放置多个RadioButton -->br <RadioButtonbr ohos:id="$ id:radio_button_5"br ohos:height="40vp"br ohos:width="match_content"br ohos:text="A.华为"br ohos:text_size="18fp"/>br <RadioButtonbr ohos:id="$ id:radio_button_6"br ohos:height="40vp"br ohos:width="match_content"br ohos:text="B.水果"br ohos:text_size="18fp"/>br <RadioButtonbr ohos:id="$ id:radio_button_7"br ohos:height="40vp"br ohos:width="match_content"br ohos:text="C.小米"br ohos:text_size="18fp"/>br <RadioButtonbr ohos:id="$ id:radio_button_8"br ohos:height="40vp"br ohos:width="match_content"br ohos:text="D.魅族"br ohos:text_size="18fp"/>brbr </RadioContainer>br

效果图：

设置响应RadioContainer状态改变的事件。

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

根据索引值设置指定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); } });

运行效果：