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

发布于 2021-3-24 10:44
浏览
0收藏

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

 

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

 

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

 

HarmonyOS APP - 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 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2021-3-24 11:46:45修改
2
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐