鸿蒙学习-RadioButton，RadioContainer

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

RadioButton用于多选一的操作，需要搭配RadioContainer使用，实现单选效果。本质就是一个左边带图片的Button。

RadioButton，RadioContainer也可以看做是一个DirectionalLayout有一个或多个的Button

RadioButton

常用属性

marked：当前状态，boolean类型可以，对应方法setChecked设置当前状态，isChecked获取当前状态

text_color_on：处于选中状态的文本颜色，对应方法setTextColorOn

text_color_off：处于未选中状态的文本颜色，对应方法setTextColorOff

check_element：状态标志样式Element类型，可设置RadioButton选中和未选中的左边图片样式，

RadioContainer

常用方法

RadioContainer container = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);

//设置选中的RadioButton

container.mark(0);

//清除RadioContainer中所有RadioButton的选定状态。

container.cancelMarks();

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

container.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {

    @Override

    public void onCheckedChanged(RadioContainer radioContainer, int index) {

//调用cancelMarks时，index为-1

    }

});

//设置布局方向为横向布局效果

container.setOrientation(Component.HORIZONTAL);

效果图：

默认选中第二个RadioButton

点击第一个RadioButton

清除选中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">

<Button

        ohos:id="$+id:bt"

        ohos:height="match_content"

        ohos:width="match_content"

        ohos:text="清除"

        ohos:text_size="50"/>

<RadioContainer

        ohos:id="$+id:rc"

        ohos:height="match_content"

        ohos:width="match_content"

        ohos:margin="50"

        >

<RadioButton

            ohos:id="$+id:rb1"

            ohos:height="match_content"

            ohos:width="match_content"

            ohos:check_element="$graphic:select"

            ohos:text="A"

            ohos:text_size="50">

</RadioButton>

<RadioButton

            ohos:id="$+id:rb2"

            ohos:height="match_content"

            ohos:width="match_content"

            ohos:check_element="$graphic:select"

            ohos:text="B"

            ohos:text_size="50">

</RadioButton>

<RadioButton

            ohos:id="$+id:rb3"

            ohos:height="match_content"

            ohos:width="match_content"

            ohos:check_element="$graphic:select"

            ohos:text="C"

            ohos:text_size="50">

</RadioButton>

</RadioContainer>

</DirectionalLayout>

select.xml代码

<?xml version="1.0" encoding="UTF-8" ?>

<state-container xmlns:ohos="http://schemas.huawei.com/res/ohos">

选中样式

<item ohos:element="#123456" ohos:state="component_state_checked"/>

未选中/状态为空的样式

<item ohos:element="#FFFF0000" ohos:state="component_state_empty"  />

</state-container>

java代码

public class MainAbilitySliceextends AbilitySlice {

@Override

    public void onStart(Intent intent) {

super.onStart(intent);

super.setUIContent(ResourceTable.Layout_ability_main);

RadioContainer rc = (RadioContainer) findComponentById(ResourceTable.Id_rc);

rc.mark(1);

rc.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {

@Override

            public void onCheckedChanged(RadioContainer radioContainer,int index) {

showToast("index=" + index +"    " +rc.getMarkedButtonId());

}

});

findComponentById(ResourceTable.Id_bt).setClickedListener(new Component.ClickedListener() {

@Override

            public void onClick(Component component) {

rc.cancelMarks();

}

});

}

public void showToast(String msg) {

ToastDialog dialog =new ToastDialog(getContext());

dialog.setAlignment(LayoutAlignment.CENTER);

dialog.setText(msg);

dialog.show();

}

}