一、Radio
Radio单选框是一种表单元素,允许用户从一组选项中选择一个选项。它由一个圆圈和一个标签组成,用户只能选择其中一个选项。Radio单选框通常用于表单中,用于收集用户选择的信息,例如用户性别、年龄、爱好等等。
Radio单选框的作用是允许用户从有限的选项中进行选择,使表单填写更加快捷和准确。它通常比选择框更加直观,用户可以一目了然地看到所有可选项,并且只能选择一个。在Web界面设计中,Radio单选框常用于要求用户做出决策的场合,例如注册表单、调查问卷等。
1.创建单选框
语法说明:
Radio(options: {value: string, group: string})
使用:
// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct 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 })
}
}
2.添加事件
// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct 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按钮适用于任何需要用户在几个选项中进行选择的场景。它提供了一种简单易用的用户界面元素,使得用户可以方便快捷地选择他们需要的选项。
案例:
// xxx.ets
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct 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
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容