[文章]HarmonyOSAPP-RadioButton+RadioContainer体验与分享

阅读量0
0
2
`

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

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

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




代码如下:
<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical">

    <DirectionalLayoutohos:height="500px"ohos:width="match_parent"ohos:orientation="vertical">
        <Textohos:height="80px"ohos:width="match_parent"ohos:text="周末都在家干些啥呢(多选)。"ohos:text_size="18fp"/>
        <DirectionalLayoutohos:height="400px"ohos:width="match_parent"ohos:orientation="vertical">
            <DirectionalLayoutohos:height="100px"ohos:width="match_parent"ohos:orientation="horizontal">
                <RadioButtonohos: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"/>
                <RadioButtonohos: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>
            <DirectionalLayoutohos:height="100px"ohos:width="match_parent"ohos:orientation="horizontal">
                <RadioButtonohos: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"/>
                <RadioButtonohos: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>
            <DirectionalLayoutohos:height="100px"ohos:width="match_parent"ohos:orientation="horizontal">
                <RadioButtonohos: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"/>
                <RadioButtonohos: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>
    <DirectionalLayoutohos:height="700px"ohos:width="match_parent"ohos:orientation="vertical">
        <DirectionalLayoutohos:height="200px"ohos:width="match_parent">
            <Textohos:height="100px"ohos:width="match_parent"ohos:text="单选题(红错,蓝对)"ohos:text_size="20fp"/>
            <Textohos:height="100px"ohos:width="match_parent"ohos:text="下面那个是属于动物?"ohos:text_size="20fp"/>
        </DirectionalLayout>
        <RadioContainerohos:height="500px"ohos:width="match_content">
            <RadioButtonohos: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"/>
            <RadioButtonohos: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"/>
            <RadioButtonohos: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"/>
            <RadioButtonohos: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>
    <DirectionalLayoutohos:height="600px"ohos:width="match_parent"ohos:orientation="vertical">
        <DirectionalLayoutohos:height="100px"ohos:width="match_parent">
            <Textohos:height="match_parent"ohos:width="match_parent"ohos:text="下面那个是属于水果?"ohos:text_size="20fp"/>
        </DirectionalLayout>
        <RadioContainerohos:height="500px"ohos:width="match_content">
            <RadioButtonohos:height="40vp"ohos:width="match_content"ohos:text="A.小狗"ohos:text_size="20fp"ohos:text_color_on="red"ohos:text_color_off="#808080"/>
            <RadioButtonohos:height="40vp"ohos:width="match_content"ohos:text="B.黑凤梨"ohos:text_size="20fp"ohos:text_color_on="#00BFFF"ohos:text_color_off="#808080"/>
            <RadioButtonohos:height="40vp"ohos:width="match_content"ohos:text="C.小猫"ohos:text_size="20fp"ohos:text_color_on="red"ohos:text_color_off="#808080"/>
            <RadioButtonohos: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

`
图片3.png

回帖

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
链接复制成功,分享给好友