HarmonyOS APP - RadioButton+RadioContainer体验与分享 原创

这里敲了RadioButton+RadioContainer的一个小案例，简单做了一个多选和单选的选择题。

RadioButton我们可以用在多重选择的时候使用该组件，方便用户做出多种选择。

RadioContainer这个是用于单选，可以用于唯一答案的选择例如男女选项。

代码如下：

<?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">

    <DirectionalLayout
        ohos:height="500px"
        ohos:width="match_parent"
        ohos:orientation="vertical">
        <Text
            ohos:height="80px"
            ohos:width="match_parent"
            ohos:text="周末都在家干些啥呢（多选）。"
            ohos:text_size="18fp"/>
        <DirectionalLayout
            ohos:height="400px"
            ohos:width="match_parent"
            ohos:orientation="vertical">
            <DirectionalLayout
                ohos:height="100px"
                ohos:width="match_parent"
                ohos:orientation="horizontal">
                <RadioButton
                    ohos:id="$+id:rb_1"
                    ohos:height="40vp"
                    ohos:width="0px"
                    ohos:weight="1"
                    ohos:text="A.吃饭"
                    ohos:text_size="20fp"
                    ohos:text_color_on="#00BFFF"
                    ohos:text_color_off="#808080"
                    />
                <RadioButton
                    ohos:id="$+id:rb_2"
                    ohos:height="40vp"
                    ohos:width="0px"
                    ohos:weight="1"
                    ohos:text="B.睡觉"
                    ohos:text_size="20fp"
                    ohos:text_color_on="#00BFFF"
                    ohos:text_color_off="#808080"/>
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="100px"
                ohos:width="match_parent"
                ohos:orientation="horizontal">
                <RadioButton
                    ohos:id="$+id:rb_3"
                    ohos:height="40vp"
                    ohos:width="0px"
                    ohos:weight="1"
                    ohos:text="C.打豆豆"
                    ohos:text_size="20fp"
                    ohos:text_color_on="#00BFFF"
                    ohos:text_color_off="#808080"
                    />
                <RadioButton
                    ohos:id="$+id:rb_4"
                    ohos:height="40vp"
                    ohos:width="0px"
                    ohos:weight="1"
                    ohos:text="D.学习"
                    ohos:text_size="20fp"
                    ohos:text_color_on="#00BFFF"
                    ohos:text_color_off="#808080"/>
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="100px"
                ohos:width="match_parent"
                ohos:orientation="horizontal">
                <RadioButton
                    ohos:id="$+id:rb_5"
                    ohos:height="40vp"
                    ohos:width="0px"
                    ohos:weight="1"
                    ohos:text="E.看电视"
                    ohos:text_size="20fp"
                    ohos:text_color_on="#00BFFF"
                    ohos:text_color_off="#808080"
                    />
                <RadioButton
                    ohos:id="$+id:rb_6"
                    ohos:height="40vp"
                    ohos:width="0px"
                    ohos:weight="1"
                    ohos:text="F.敲代码"
                    ohos:text_size="20fp"
                    ohos:text_color_on="#00BFFF"
                    ohos:text_color_off="#808080"/>
            </DirectionalLayout>
        </DirectionalLayout>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:height="700px"
        ohos:width="match_parent"
        ohos:orientation="vertical">
        <DirectionalLayout
            ohos:height="200px"
            ohos:width="match_parent">
            <Text
                ohos:height="100px"
                ohos:width="match_parent"
                ohos:text="单选题（红错，蓝对）"
                ohos:text_size="20fp"/>
            <Text
                ohos:height="100px"
                ohos:width="match_parent"
                ohos:text="下面那个是属于动物？"
                ohos:text_size="20fp"/>
        </DirectionalLayout>
        <RadioContainer
            ohos:height="500px"
            ohos:width="match_content">
            <RadioButton
                ohos:id="$+id:radio_button_1"
                ohos:height="40vp"
                ohos:width="match_content"
                ohos:text="A.苹果"
                ohos:text_size="20fp"
                ohos:text_color_on="red"
                ohos:text_color_off="#808080"/>
            <RadioButton
                ohos:id="$+id:radio_button_2"
                ohos:height="40vp"
                ohos:width="match_content"
                ohos:text="B.香蕉"
                ohos:text_size="20fp"
                ohos:text_color_on="red"
                ohos:text_color_off="#808080"/>
            <RadioButton
                ohos:id="$+id:radio_button_3"
                ohos:height="40vp"
                ohos:width="match_content"
                ohos:text="C.小狗"
                ohos:text_size="20fp"
                ohos:text_color_on="#00BFFF"
                ohos:text_color_off="#808080"/>
            <RadioButton
                ohos:id="$+id:radio_button_4"
                ohos:height="40vp"
                ohos:width="match_content"
                ohos:text="D.葡萄"
                ohos:text_size="20fp"
                ohos:text_color_on="red"
                ohos:text_color_off="#808080"/>

        </RadioContainer>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:height="600px"
        ohos:width="match_parent"
        ohos:orientation="vertical">
        <DirectionalLayout
            ohos:height="100px"
            ohos:width="match_parent">
            <Text
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:text="下面那个是属于水果？"
                ohos:text_size="20fp"/>
        </DirectionalLayout>
        <RadioContainer
            ohos:height="500px"
            ohos:width="match_content">
            <RadioButton
                ohos:height="40vp"
                ohos:width="match_content"
                ohos:text="A.小狗"
                ohos:text_size="20fp"
                ohos:text_color_on="red"
                ohos:text_color_off="#808080"/>
            <RadioButton
                ohos:height="40vp"
                ohos:width="match_content"
                ohos:text="B.黑凤梨"
                ohos:text_size="20fp"
                ohos:text_color_on="#00BFFF"
                ohos:text_color_off="#808080"/>
            <RadioButton
                ohos:height="40vp"
                ohos:width="match_content"
                ohos:text="C.小猫"
                ohos:text_size="20fp"
                ohos:text_color_on="red"
                ohos:text_color_off="#808080"/>
            <RadioButton
                ohos:height="40vp"
                ohos:width="match_content"
                ohos:text="D.小马"
                ohos:text_size="20fp"
                ohos:text_color_on="red"
                ohos:text_color_off="#808080"/>

        </RadioContainer>
    </DirectionalLayout>

</DirectionalLayout>

完整代码下载地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_RadioButton+RadioContainer_component