[文章]HarmonyOSAPP-RadioButton+RadioContainer体验与分享
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>
<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
`
回帖高级模式
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉