HarmonyOS APP組件分享(四)
作者：鴻蒙時代
文章由鴻蒙社區產出，想要了解更多內容請前往：51CTO和華為官方戰略合作共建的鴻蒙技術社區https://harmonyos.51cto.com
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
責任編輯：jianghua
來源：
鴻蒙社區
