-
-
[原创]鸿蒙HarmonyOS实战-ArkUI组件（Radio）
-
发表于: 2024-4-13 20:31
-
????一、Radio
Radio单选框是一种表单元素，允许用户从一组选项中选择一个选项。它由一个圆圈和一个标签组成，用户只能选择其中一个选项。Radio单选框通常用于表单中，用于收集用户选择的信息，例如用户性别、年龄、爱好等等。
Radio单选框的作用是允许用户从有限的选项中进行选择，使表单填写更加快捷和准确。它通常比选择框更加直观，用户可以一目了然地看到所有可选项，并且只能选择一个。在Web界面设计中，Radio单选框常用于要求用户做出决策的场合，例如注册表单、调查问卷等。
1.创建单选框
语法说明：
1 | Radio(options: {value: string, group: string}) |
使用：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // xxx.etsimport router from '@ohos.router';@Entry@Componentstruct Index { build() { Row() { Radio({ value: 'Radio1', group: 'radioGroup' }) .checked(false) Radio({ value: 'Radio2', group: 'radioGroup' }) .checked(true) } .width('100%') .height('100%') .backgroundColor(0xDCDCDC) .padding({ top: 5 }) }} |
https://img-blog.csdnimg.cn/direct/41a3675d5e7b4890a0f1447c6cfa21b8.png
2.添加事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | // xxx.etsimport router from '@ohos.router';@Entry@Componentstruct Index { build() { Row() { Radio({ value: 'Radio1', group: 'radioGroup' }) .onChange((isChecked: boolean) => { if(isChecked) { //需要执行的操作 console.log('1') } }) Radio({ value: 'Radio2', group: 'radioGroup' }) .onChange((isChecked: boolean) => { if(isChecked) { //需要执行的操作 console.log('2') } }) } .width('100%') .height('100%') .backgroundColor(0xDCDCDC) .padding({ top: 5 }) }} |
3.案例
Radio按钮是一种常见的用户界面元素，常用于允许用户在几个选项中选择一个。以下是Radio按钮的几个常见应用场景：
设置偏好：当应用程序需要让用户选择一种选项，例如语言偏好或其他个人偏好设置时，可以使用Radio按钮。
选择筛选条件：当用户需要在多个筛选条件中选择一个时，可以使用Radio按钮。例如，在电子商务网站中，用户可以使用Radio按钮选择价格范围或产品类别。
选择付款方式：当用户需要在几种付款方式中选择一种时，可以使用Radio按钮。例如，在在线购物网站中，用户可以选择使用信用卡、PayPal或网上银行。
选择性别：在某些网站或应用程序中，当用户需要提供性别信息时，可以使用Radio按钮。
多步骤表单：当构建具有多个步骤的表单时，可以使用Radio按钮来选择各个步骤之间的选项。
Radio按钮适用于任何需要用户在几个选项中进行选择的场景。它提供了一种简单易用的用户界面元素，使得用户可以方便快捷地选择他们需要的选项。
案例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | // xxx.etsimport promptAction from '@ohos.promptAction';@Entry@Componentstruct Index { build() { Row() { Column() { Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) .height(50) .width(50) .onChange((isChecked: boolean) => { if(isChecked) { // 切换为响铃模式 promptAction.showToast({ message: 'Ringing mode.' }) } }) Text('Ringing') } Column() { Radio({ value: 'Radio2', group: 'radioGroup' }) .height(50) .width(50) .onChange((isChecked: boolean) => { if(isChecked) { // 切换为振动模式 promptAction.showToast({ message: 'Vibration mode.' }) } }) Text('Vibration') } Column() { Radio({ value: 'Radio3', group: 'radioGroup' }) .height(50) .width(50) .onChange((isChecked: boolean) => { if(isChecked) { // 切换为静音模式 promptAction.showToast({ message: 'Silent mode.' }) } }) Text('Silent') } }.height('100%').width('100%').justifyContent(FlexAlign.Center) }} |
????写在最后
- 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
- 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
- 关注小编，同时可以期待后续文章ing????，不定期分享原创知识。
- 更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY
[注意]传递专业知识、拓宽行业人脉——看雪讲师团队等你加入！
