当前位置: 首页 > article >正文

「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, // 设置类型为 Switch
        isOn: this.isActive, // 绑定状态
      })
        .selectedColor(Color.Green) // 选中状态颜色
        .switchPointColor(Color.White) // 按钮颜色
        .onChange((value) => this.isActive = value) // 更新状态
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.<

http://www.kler.cn/a/371541.html

相关文章:

  • 无人机避障——使用三维PCD点云生成的2D栅格地图PGM做路径规划
  • Linux 之 文件属性与目录、字符串处理、系统信息获取
  • SpringBoot篇(运维实用篇 - 临时属性)
  • 雷军:对“雷军语音包”感到不适,希望停止使用
  • RuoYi-Vue 使用开发 人员管理-查询功能
  • 【刷题11】CTFHub技能树sql注入系列
  • Conditional DETR论文笔记
  • Java基础(4)之正则,异常与文件IO流
  • KAN原作论文github阅读(readme)
  • 深度解读GaussDB逻辑解码技术原理
  • 使用 OpenCV 进行人眼检测
  • springboot天气预报推送小程序-计算机毕业设计源码41533
  • 青少年编程与数学 02-002 Sql Server 数据库应用 15课题、备份与还原
  • C++初阶(七)--类和对象(4)
  • 临接矩阵m
  • 随机题两题
  • 开源项目-投票管理系统
  • 苹果生态的机器学习和同态加密
  • Android 玩机知识储备
  • Java国际版同城打车顺风车滴滴车跑腿系统小程序源码
  • 《 Python 与股票大盘信息的奇妙之旅》
  • 深度学习案例:带有一个隐藏层的平面数据分类
  • 等保行业如何面对新兴安全威胁
  • MFC图形函数学习04——画矩形函数
  • rabbitmq高级特性(2)TTL、死信/延迟队列、事务与消息分发
  • day03|计算机网络重难点之HTTP中常见的状态码、什么是强缓存和协商缓存