「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件

在鸿蒙开发中,ToggleCheckbox 是常用的交互组件,分别用于实现开关切换和多项选择。Toggle 提供多种类型以适应不同场景,而 Checkbox 支持自定义样式及事件回调。本篇将详细介绍这两个组件的基本用法,并通过实战展示它们的组合应用。

在这里插入图片描述


关键词
  • Toggle 组件
  • Checkbox 组件
  • 开关切换
  • 多选框
  • 事件监听

一、Toggle 组件基础

Toggle 支持三种类型:SwitchCheckboxButton。开发者可根据需求选择适合的类型,并自定义颜色和样式。

1.1 Toggle 类型与基本用法
  • 使用 @State 保存 Toggle 的状态,并通过 onChange 事件监听状态变化:
@Entry
@Component
struct ToggleExample {@State isActive: boolean = false; // 定义开关状态build() {Column() {Text(`当前状态:${this.isActive ? '开启' : '关闭'}`) // 显示当前状态.fontSize(18).margin({ bottom: 10 })Toggle({type: ToggleType.Switch, // 设置类型为 SwitchisOn: this.isActive, // 绑定状态}).selectedColor(Color.Green) // 选中状态颜色.switchPointColor(Color.White) // 按钮颜色.onChange((value) => this.isActive = value) // 更新状态}.width('100%').height('100%').alignItems(HorizontalAlign.Center

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/460466.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于SpringBoot+Vue+MySQL的房屋租赁系统

系统展示 系统背景 随着城市化进程的加速和人口流动性的增加,房屋租赁市场逐渐成为城市生活的重要组成部分。然而,传统的房屋租赁方式存在诸多问题,如信息不对称、交易成本高、租赁关系不稳定等,这些问题严重影响了租赁市场的健康…

【MyBatis源码】SqlSession实例创建过程

在MyBatis中,openSession()方法是开启数据库会话的入口,主要作用是生成SqlSession对象。我们从SqlSessionFactory接口入手,其实现类DefaultSqlSessionFactory的openSession()方法用于创建SqlSession实例. SqlSessionFactory接口方法 public…

MoveIt 控制自己的真实机械臂【2】——编写 action server 端代码

完成了 MoveIt 这边 action client 的基本配置,MoveIt 理论上可以将规划好的 trajectory 以 action 的形式发布出来了,浅浅尝试一下,在 terminal 中运行 roslaunch xmate7_moveit_config_new demo.launch 报错提示他在等待 xmate_arm_control…

6977 树的统计

经验值:3200 时间限制:1000毫秒 内存限制:512MB 题目描述 Description 一树上有 nn 个节点,编号分别为 11 到 nn,每个节点都有一个权值 ww。我们将以下面的形式来要求你对这棵树完成一些操作: CHANGE …

SQL之排名RANK()、ROW_NUMBER()、DENSE_RANK() 和 NTILE() 的区别(SQL 和 Hive SQL 都支持)

现有一张student 表,表中包含id、uname、age、score 四个字段,如下所示: 该表的数据如下所示: 一、ROW_NUMBER() 1、概念 ROW_NUMBER() 为结果集中的每一行分配一个唯一的连续整数,编号从 1 开始。‌ 该函数按照指定的顺序进行排序,即使存在相同的值,每一行也会获得…

机器人转人工时,开启实时质检(mod_cti基于FreeSWITCH)

文章目录 前言联系我们实现步骤1. 修改拨号方案2. 启用拨号方案 前言 在客户与机器人对话中,是不能开启质检功能的。因为机器人识别会与质检识别产生冲突。如果用户想通过机器人转接到人工时,开启质检功能,记录客户与人工之间的对话。应该如…

结合Intel RealSense深度相机和OpenCV来实现语义SLAM系统

结合Intel RealSense深度相机和OpenCV来实现语义SLAM系统是一个非常强大的组合。以下是一个详细的步骤指南,帮助你构建这样一个系统。 硬件准备 Intel RealSense深度相机:例如D415、D435或L515。计算平台:一台具有足够计算能力的计算机&…

【JVM 深入了解】JVM 到底包含什么?

👉博主介绍: 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主 ⛪️ 个人社区&#x…

炫酷的登录框!(附源码)

大家想看什么前端效果请留言 预览效果 源码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>登录页…

MYSQL-SQL-03-DQL(Data Query Language,数据查询语言)(单表查询)

DQL&#xff08;数据查询语言&#xff09; DQL英文全称是Data Query Language(数据查询语言)&#xff0c;数据查询语言&#xff0c;用来查询数据库中表的记录。 查询关键字: SELECT 在一个正常的业务系统中&#xff0c;查询操作的频次是要远高于增删改的&#xff0c;当我们去访…

从理解路由到实现一套Router(路由)

小伙伴们大家好啊&#xff0c;我是李牌牌。平时在Vue项目中经常用到路由&#xff0c;但是也仅仅处于会用的层面&#xff0c;很多基础知识并不是真正的理解。于是牌牌呢查阅了很多资料&#xff0c;总结下路由相关的知识&#xff0c;查缺不漏&#xff0c;加深自己对路由的理解。 …

MFC图形函数学习04——画矩形函数

MFC中绘制矩形函数是MFC的基本绘图函数&#xff0c;它的大小和位置由左上角和右下角的坐标决定&#xff1b;若想绘制的矩形边框线型、线宽、颜色以及填充颜色都还需要其它函数的配合。 一、绘制矩形函数 原型&#xff1a;BOOL Rectangle(int x1,int y1,int x2,int y2); …

Kafka 与传统 MQ 消息系统之间有三个关键区别?

大家好&#xff0c;我是锋哥。今天分享关于【Kafka 与传统 MQ 消息系统之间有三个关键区别&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; Kafka 与传统 MQ 消息系统之间有三个关键区别&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 …

TLKS-PMG-100BM这款输电线路智能多目视频监控装置,它具体有哪些亮点和优势?

TLKS-PMG-100BM输电线路智能多目视频监控装置&#xff08;输电线路全景视频监控装置、输电线路云台变焦视频监控装置&#xff09;无疑是一款功能全面、性能卓越的输电线路智能监控装置。它配备了水平360、垂直90旋转的全向云台摄像头&#xff0c;能够轻松实现全景视野监视&…

Java中的运算符【与C语言的区别】

目录 1. 算术运算符 1.0 赋值运算符&#xff1a; 1.1 四则运算符&#xff1a; - * / % 【取余与C有点不同】 1.2 增量运算符&#xff1a; - * / % * 【右侧运算结果会自动转换类型】 1.3 自增、自减&#xff1a;、-- 2. 关系运算符 3. 逻辑运算符 3.1 短路求值 3.2 【…

目标检测:YOLOv11(Ultralytics)环境配置,适合0基础纯小白,超详细

目录 1.前言 2. 查看电脑状况 3. 安装所需软件 3.1 Anaconda3安装 3.2 Pycharm安装 4. 安装环境 4.1 安装cuda及cudnn 4.1.1 下载及安装cuda 4.1.2 cudnn安装 4.2 创建虚拟环境 4.3 安装GPU版本 4.3.1 安装pytorch&#xff08;GPU版&#xff09; 4.3.2 安装ultral…

HT7178 带输出关断的20V,14A全集成同步升压转换器

1、特点 输入电压范围VpIN:2.7V-20V 输出电压范围VouT:4.5V-20V 可编程峰值电流:14A 高转换效率: 95%(VPIN7.2V, VoUT 16V, IouT3A) 94%(VPIN12V,VoUT18V,IoUT4A) 90%(VPIN3.3, VoUT-9V,IOUT3A) 轻载条件下两种调制方式:脉频调制(PFM)和 强制脉宽调试(PWM) 集成输出关断的栅极…

使用axios请求分页

npm install axios <template><div><el-table :data"items" style"width: 100%"><el-table-column prop"id" label"ID" /><el-table-column prop"name" label"名称" /><!-- 添…

基于SpringBoot的在线医疗问答平台

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

codeforces _ 补题

C. Ball in Berland 传送门&#xff1a;Problem - C - Codeforces 题意&#xff1a; 思路&#xff1a;容斥原理 考虑 第 i 对情侣组合 &#xff0c;男生为 a &#xff0c;女生为 b &#xff0c;那么考虑与之匹配的情侣 必须没有 a | b &#xff0c;一共有 k 对情侣&#x…