鸿蒙next版开发：ArkUI组件（Radio）

代码不岩机QAQ

于 2024-08-10 20:36:24 发布

阅读量787

点赞数 8

分类专栏：鸿蒙 ArkUI 文章标签： harmonyos 华为服务器鸿蒙鸿蒙系统 android

本文链接：https://blog.csdn.net/SOFTQAQ/article/details/141095901

版权

鸿蒙同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

ArkUI

27 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，

内容包含了：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料