Harmony OS — RadioButton & RadioContainer单选按钮&单选按钮组

Posted 2021-07-16 王睿丶

文章目录

• • 1、RadioButton
  • • 1.1、RadioButton 是什么？
    • 1.2、简单使用
    • 1.3、设置 RadioButton 样式
    • 1.4、了解更多
  • 2、RadioContainer
  • • 2.1、RadioContainer 是什么？
    • 2.2、简单使用
    • 2.3、常用属性
    • 2.4、实战：实现单选题的选择效果
    • 2.5、了解更多

1、RadioButton

1.1、RadioButton 是什么？

简单：单选按钮
官方：RadioButton用于多选一的操作，需要搭配RadioContainer使用，实现单选效果。

1.2、简单使用

    <RadioButton
        ohos:id="$+id:rb_1"
        ohos:height="40vp"
        ohos:width="match_content"
        ohos:text="A.Learning"
        ohos:margin="30fp"
        ohos:text_size="20fp"/>

1.3、设置 RadioButton 样式

<RadioButton
    ...
    ohos:text_color_on="#00BFFF"
    ohos:text_color_off="#808080"/>

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

1.4、了解更多

了解更多

2、RadioContainer

2.1、RadioContainer 是什么？

简单：单选按钮租
官方：RadioContainer是RadioButton的容器，在其包裹下的RadioButton保证只有一个被选项。

2.2、简单使用

    <RadioContainer
        ohos:id="$+id:radio_container"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="32vp"
        ohos:layout_alignment="horizontal_center">
        <RadioButton
            ohos:id="$+id:radio_button_1"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A.Learning"
            ohos:text_color_on="#00BFFF"
            ohos:text_color_off="#808080"
            ohos:text_size="20fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_2"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text_color_on="#00BFFF"
            ohos:text_color_off="#808080"
            ohos:text="A.Innovation"
            ohos:text_size="20fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_3"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text_color_on="#00BFFF"
            ohos:text_color_off="#808080"
            ohos:text="A.Benefit"
            ohos:text_size="20fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_4"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A.Unity"
            ohos:text_color_on="#00BFFF"
            ohos:text_color_off="#808080"
            ohos:text_size="20fp"/>
    </RadioContainer>

2.3、常用属性

（1）设置响应RadioContainer状态改变的事件

RadioContainer container = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);
container.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
    @Override
    public void onCheckedChanged(RadioContainer radioContainer, int index) {
    // 可参考下方场景实例代码，自行实现
    ...
    }
});

（2）根据索引值设置指定RadioButton为选定状态

container.mark(0);

（3）清除RadioContainer中所有RadioButton的选定状态

container.cancelMarks();

（4）设置RadioButton的布局方向：orientation设置为“horizontal”，表示横向布局；orientation设置为“vertical”，表示纵向布局。默认为纵向布局。

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

container.setOrientation(Component.HORIZONTAL);

2.4、实战：实现单选题的选择效果

        RadioContainer radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);
        int count = radioContainer.getChildCount();
        //给每个RadioButton 设置背景
        for (int i = 0; i < count; i++){
            ((RadioButton) radioContainer.getComponentAt(i)).setButtonElement(createStateElement());
        }

        Text answer = (Text) findComponentById(ResourceTable.Id_text_checked);
        radioContainer.setMarkChangedListener((radioContainer1, index) -> {
            //参数一：格式符，参数二：ASCLL码值 + 坐标 = 选择的值
            answer.setText(String.format("[%c]",(char)('A'+index)));
        });

<?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:alignment="horizontal_center"
    ohos:orientation="vertical"
    ohos:left_padding="32vp">
    <Text
        ohos:height="match_content"
        ohos:width="300vp"
        ohos:top_margin="32vp"
        ohos:text="Question:Which of the following options belong to fruit?"
        ohos:text_size="20fp"
        ohos:layout_alignment="left"
        ohos:multiple_lines="true"/>
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:top_margin="8vp">
        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="Your Answer:"
            ohos:text_size="20fp"/>
        <Text
            ohos:id="$+id:text_checked"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="20fp"
            ohos:left_margin="18vp"
            ohos:text="[]"
            ohos:text_color="#FF3333"/>
    </DirectionalLayout>
    <RadioContainer
        ohos:id="$+id:radio_container"
        ohos:height="match_content"
        ohos:width="200vp"
        ohos:layout_alignment="left"
        ohos:orientation="vertical"
        ohos:top_margin="16vp"
        ohos:left_margin="4vp">
        <RadioButton
            ohos:id="$+id:radio_button_1"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A.Apple"
            ohos:text_size="20fp"
            ohos:text_color_on="#FF3333"/>
        <RadioButton
            ohos:id="$+id:radio_button_2"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="B.Potato"
            ohos:text_size="20fp"
            ohos:text_color_on="#FF3333"/>
        <RadioButton
            ohos:id="$+id:radio_button_3"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="C.Pumpkin"
            ohos:text_size="20fp"
            ohos:text_color_on="#FF3333"/>
        <RadioButton
            ohos:id="$+id:radio_button_4"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="D.Vegetables"
            ohos:text_size="20fp"
            ohos:text_color_on="#FF3333"/>
    </RadioContainer>
</DirectionalLayout>

2.5、了解更多

了解更多