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
HarmonyOS APP - Switch体验与分享
Switch是切换单个设置开/关两种状态的组件。我们体验效果如下。
显示效果：
滑动按钮：
代码如下：
布局中
- <?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">
- <Switch
- ohos:id="$+id:btn_switch"
- ohos:height="30vp"
- ohos:width="60vp"
- ohos:top_margin="40px"
- ohos:left_margin="400px"
- ohos:text_state_off="OFF"
- ohos:text_state_on="ON"/>
- </DirectionalLayout>
完整源码地址：
https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_switch_component
