鸿蒙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按钮的几个常见应用场景:
设置偏好:当应用程序需要让用户选择一种选项,例如语言偏好或其他个人偏好设置时,可以使用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
鸿蒙HarmonyOS实战-ArkUI组件(Radio)的更多相关文章
- 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用
注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...
- element-ui button组件 radio组件源码分析整理笔记(一)
Button组件 button.vue <template> <button class="el-button" @click="handleClick ...
- 微信小程序组件radio
表单组件radio:官方文档 Demo Code: Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: ' ...
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 手把手带你体验鸿蒙 harmonyOS
wNlRGd.png 前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 GIthub 博客 学习导图 image.png 一.为什么要尝鲜 harmonyos? wNlfx ...
- 最全华为鸿蒙 HarmonyOS 开发资料汇总
开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA.常用和自定义组件.用户交互.JS 动画的实现,通过本示例可以基本了解和学习到 JavaS ...
- 鸿蒙HarmonyOS应用开发落地实践,Harmony Go 技术沙龙落地北京
12月26日,华为消费者BG软件部开源中心与51CTO Harmony OS技术社区携手,共同主办了主题为"Harmony OS 应用开发落地实践"的 Harmony Go 技术沙 ...
- 鸿蒙开源第三方件组件——轮播组件Banner
目录: 1.功能展示 2.Sample解析 3.Library解析 4.<鸿蒙开源第三方组件>系列文章合集 前言 基于安卓平台的轮播组件Banner(https://github.com/ ...
- 14-Flutter移动电商实战-ADBanner组件的编写
拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...
- 13-Flutter移动电商实战-ADBanner组件的编写
1.AdBanner组件的编写 我们还是把这部分单独出来,需要说明的是,这个Class你也是可以完全独立成一个dart文件的.代码如下: 广告图片class AdBanner extends Stat ...
随机推荐
- Celery在Django项目中集成
使用celery第一件要做的最为重要的事情是需要先创建一个Celery实例对象,我们一般叫做celery应用对象,或者更简单直接叫做一个app.app应用对象是我们使用celery所有功能的入口,比如 ...
- Dockerfile和docker-compose详解
Dockerfile镜像制作 docker/podman中, 镜像是容器的基础,每次执行docker run的时候都会指定哪个基本镜像作为容器运行的基础.我们之前的docker的操作都是使用来自doc ...
- 【ACM专项练习#01】基本输入输出,如何加减
关于ACM,牛客其实也有专门的模拟练习:https://ac.nowcoder.com/acm/contest/5657#question 做这个也可以 关于while(cin>>n) 在 ...
- 矩池云如何自定义端口,访问自己的web项目
本文将给您介绍如何在矩池云租用服务器的时候自定义端口,并将您的 web 项目部署到自定义端口,最后实现在本地通过自定义端口对应链接访问服务. 上传代码和数据 首先,您需要将本地的项目代码和数据上传到矩 ...
- 【Azure Developer】Springboot 集成 中国区的Key Vault 报错 AADSTS90002: Tenant 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' not found
问题描述 Springboot 集成azure keyvault 报错,代码参考的官方文档:https://docs.microsoft.com/en-us/azure/developer/java/ ...
- 【Azure 环境】当本地网络通过ER专线与Azure云上多个虚拟网络打通,如何通过特定的网络策略来限制本地部分网段访问云上虚拟机22端口?
问题描述 当本地网络通过ER专线与Azure云上多个虚拟网络打通,如何通过特定的网络策略来限制本地部分网段访问云上虚拟机22端口? 问题回答 根据文档调研,在ER线路服务的层面,是无法做网络策略来限制 ...
- AntSK:打造你的本地AI知识库——离线运行详细教程
亲爱的读者朋友们,今天我要给大家介绍一个强大的开源工具--AntSK.这个工具能让您在没有Internet连接时依然能使用人工智能知识库对话和查询,想象一下,即使在无网络的环境中,您也能与AI进行愉快 ...
- php编写日历类
<?php /** * 日历类 * Class Calendar * @author fengzi * @date 2022-05-05 15:42 */ class Calendar{ pro ...
- Zabbix Agent item监控项讲解
前言 agent与snmp是Zabbix两种重要的监控方式,这一期主要介绍Zabbix Agent item监控项..Zabbix agent分为主动代理.被动代理,配置item类型时,可以选择需要的 ...
- nest.sh 脚本 发布服务
每次发布后端nest 直接执行一个脚本即可 给脚本赋值权限 chomd 777 nest.sh nest.sh 脚本 #!/bin/bash cd /root/gateway-study git pu ...