六、表单元素(04):开关

开关组件用于表示功能的启用与关闭状态。用户可通过点击滑块控制其状态变更,常用于系统设置、权限控制、通知开关等场景。开关具有简洁、直观的交互方式,可灵活配置外观尺寸和颜色,适配各种界面风格。

应用场景

  1. 功能启用/禁用

用于控制某项功能是否生效,例如"自动播放"、"开启定位服务"等。

  1. 用户设置项

用于在设置页面中启用或关闭个人偏好,例如"夜间模式"、"推送提醒"等。

  1. 状态指示控制

作为状态开关的视觉反馈,例如"是否在线"、"是否公开"等布尔状态展示。

常用属性及说明

属性名称 作用 默认值
开关初始值 控制开关默认是开启还是关闭 关闭
控制开关组件整体宽度 55
控制开关组件整体高度 26
活跃轨道颜色 开关开启状态下轨道的背景颜色 #FF8BC34A
非活跃轨道颜色 开关关闭状态下轨道的背景颜色 #FF9E9E9E
活跃凸轮颜色 开关开启状态下滑块(凸轮)的颜色 #FFFFFFFF
非活跃凸轮颜色 开关关闭状态下滑块颜色 #FFFFFFFF
轨道边框高度 控制轨道边框的宽度 0
凸轮边框高度 控制滑块(凸轮)的边框线宽 0
活跃轨道边框颜色 开启状态下轨道边框颜色 #FF40C4FF
非活跃轨道边框颜色 关闭状态下轨道边框颜色 #1F000000
活跃凸轮边框颜色 开启状态下滑块边框颜色 #FFFFFFFF
非活跃凸轮边框颜色 关闭状态下滑块边框颜色 #1F000000
相关推荐
Lanren的编程日记5 小时前
任务76:Flutter 鸿蒙应用音频录制功能实战:音频录制+录音管理+录音编辑,打造完整音频处理能力
flutter·华为·音视频·harmonyos
IntMainJhy5 小时前
【flutter for open harmony】第三方库 Flutter运动计时器的鸿蒙化适配与实战指南
flutter·华为·信息可视化·数据库开发·harmonyos
Hello__77775 小时前
开源鸿蒙 Flutter 实战|徽章组件全流程实现
flutter·开源·harmonyos
IntMainJhy5 小时前
【flutter for open harmony】 第三方库 Flutter饮食记录的鸿蒙化适配与实战指南
flutter·华为·信息可视化·数据库开发·harmonyos
张风捷特烈5 小时前
状态管理大乱斗#05 | Riverpod 源码评析 (中) - 上层建筑
android·前端·flutter
Lanren的编程日记5 小时前
Flutter 鸿蒙应用数据统计分析功能实战:数据统计+数据可视化+报表生成,打造全链路数据分析能力
flutter·华为·信息可视化·harmonyos
Hello__77778 小时前
开源鸿蒙 Flutter 实战|自定义开关组件全流程实现
flutter·开源·harmonyos
maaath18 小时前
【maaath】Flutter for OpenHarmony 跨平台工程集成密码加密能力
flutter·华为·harmonyos
yeziyfx18 小时前
Flutter 纯色矩形
flutter
liulian091618 小时前
Flutter for OpenHarmony 混合开发实践:用户反馈功能的实现与适配
flutter·华为·学习方法·harmonyos