HarmonyOS —常用组件开发指导-RadioContainer

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

支持的XML属性

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

创建RadioContainer

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

<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_size="14fp"/>
    <!-- 放置多个RadioButton -->
    ... 
</RadioContainer>

图1 RadioContainer效果

设置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();

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

在xml中设置：

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

在Java代码中设置：

container.setOrientation(Component.HORIZONTAL);

图2 设置布局方向为横向布局效果

场景实例

使用RadioContainer实现单选题的选择效果。

图3 实现单选场景效果

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: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>

Java代码示例：通过以下方法，定义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;
    }

设置RadioButton的背景。

RadioContainer radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);
int count = radioContainer.getChildCount();
for (int i = 0; i < count; i++){
    ((RadioButton) radioContainer.getComponentAt(i)).setButtonElement(createStateElement());
}

设置响应RadioContainer状态改变的事件，显示单选结果。

Text answer = (Text) findComponentById(ResourceTable.Id_text_checked);
radioContainer.setMarkChangedListener((radioContainer1, index) -> {
    answer.setText(String.format("[%c]",(char)('A'+index)));
});