鸿蒙HarmonyOS实战-ArkUI组件(Radio)

🚀一、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 })
  }
}

https://img-blog.csdnimg.cn/direct/41a3675d5e7b4890a0f1447c6cfa21b8.png

🔎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按钮的几个常见应用场景:

  1. 设置偏好:当应用程序需要让用户选择一种选项,例如语言偏好或其他个人偏好设置时,可以使用Radio按钮。

  2. 选择筛选条件:当用户需要在多个筛选条件中选择一个时,可以使用Radio按钮。例如,在电子商务网站中,用户可以使用Radio按钮选择价格范围或产品类别。

  3. 选择付款方式:当用户需要在几种付款方式中选择一种时,可以使用Radio按钮。例如,在在线购物网站中,用户可以选择使用信用卡、PayPal或网上银行。

  4. 选择性别:在某些网站或应用程序中,当用户需要提供性别信息时,可以使用Radio按钮。

  5. 多步骤表单:当构建具有多个步骤的表单时,可以使用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

热门相关:军少夜宠:小甜妻,乖!   恐怖复苏   大周仙吏   我的女友是丧尸   99次出墙:老公,情难自禁