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

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

应用场景

  1. 功能启用/禁用

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

  1. 用户设置项

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

  1. 状态指示控制

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

常用属性及说明

属性名称 作用 默认值
开关初始值 控制开关默认是开启还是关闭 关闭
控制开关组件整体宽度 55
控制开关组件整体高度 26
活跃轨道颜色 开关开启状态下轨道的背景颜色 #FF8BC34A
非活跃轨道颜色 开关关闭状态下轨道的背景颜色 #FF9E9E9E
活跃凸轮颜色 开关开启状态下滑块(凸轮)的颜色 #FFFFFFFF
非活跃凸轮颜色 开关关闭状态下滑块颜色 #FFFFFFFF
轨道边框高度 控制轨道边框的宽度 0
凸轮边框高度 控制滑块(凸轮)的边框线宽 0
活跃轨道边框颜色 开启状态下轨道边框颜色 #FF40C4FF
非活跃轨道边框颜色 关闭状态下轨道边框颜色 #1F000000
活跃凸轮边框颜色 开启状态下滑块边框颜色 #FFFFFFFF
非活跃凸轮边框颜色 关闭状态下滑块边框颜色 #1F000000
相关推荐
猛扇赵四那边好嘴.3 小时前
Flutter 框架跨平台鸿蒙开发 - 问答社区应用开发教程
开发语言·javascript·flutter·华为·harmonyos
LawrenceLan3 小时前
Flutter 零基础入门(二十二):Text 文本组件与样式系统
开发语言·前端·flutter·dart
kirk_wang4 小时前
Flutter艺术探索-Flutter性能优化基础:const与const构造函数
flutter·移动开发·flutter教程·移动开发教程
AiFlutter4 小时前
Flutter-Android不能通过apply script方法应用Gradle插件
android·flutter
恋猫de小郭5 小时前
Flutter 又迎大坑修改?iOS 26 键盘变化可能带来大量底层改动
android·flutter·ios·kotlin
lbb 小魔仙5 小时前
【Harmonyos】开源鸿蒙跨平台训练营DAY1:Windows上搭建Flutte跨平台开发环境
windows·flutter·harmonyos·鸿蒙·开源鸿蒙·鸿蒙开平台应用
猛扇赵四那边好嘴.5 小时前
Flutter 框架跨平台鸿蒙开发 - 数学练习应用开发教程
flutter·华为·harmonyos
[H*]5 小时前
Flutter框架跨平台鸿蒙开发——Image Providers详解
flutter·华为·harmonyos
鸣弦artha6 小时前
Flutter框架跨平台鸿蒙开发——EventChannel事件通道
flutter·华为·harmonyos