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

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

应用场景

  1. 功能启用/禁用

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

  1. 用户设置项

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

  1. 状态指示控制

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

常用属性及说明

属性名称 作用 默认值
开关初始值 控制开关默认是开启还是关闭 关闭
控制开关组件整体宽度 55
控制开关组件整体高度 26
活跃轨道颜色 开关开启状态下轨道的背景颜色 #FF8BC34A
非活跃轨道颜色 开关关闭状态下轨道的背景颜色 #FF9E9E9E
活跃凸轮颜色 开关开启状态下滑块(凸轮)的颜色 #FFFFFFFF
非活跃凸轮颜色 开关关闭状态下滑块颜色 #FFFFFFFF
轨道边框高度 控制轨道边框的宽度 0
凸轮边框高度 控制滑块(凸轮)的边框线宽 0
活跃轨道边框颜色 开启状态下轨道边框颜色 #FF40C4FF
非活跃轨道边框颜色 关闭状态下轨道边框颜色 #1F000000
活跃凸轮边框颜色 开启状态下滑块边框颜色 #FFFFFFFF
非活跃凸轮边框颜色 关闭状态下滑块边框颜色 #1F000000
相关推荐
恋猫de小郭2 小时前
Amper 正式转正 Kotlin Toolchain ,Gradle 未来何去何从
android·前端·flutter
张风捷特烈2 小时前
Flutter 类库大揭秘#02 | path_provider 各平台实现
前端·flutter
TT_Close1 天前
别劝退了!5秒搞定 Flutter 鸿蒙 FVM 起跑线
flutter·harmonyos·visual studio code
你听得到111 天前
用户说 App 卡,但说不清在哪?我把 Flutter 监控 SDK 升级成了链路观测工作台
前端·flutter·性能优化
stringwu3 天前
Flutter 开发必备:MVI 架构的高效实现指南
前端·flutter
程序员老刘3 天前
Flutter版本选择指南:3.44系列继续观望 | 2026年6月
flutter·ai编程·客户端
用户965597361905 天前
Provider vs Bloc vs GetX vs Riverpod:Flutter 状态管理方案怎么选?
flutter
恋猫de小郭5 天前
Flutter Patchwork,不用 Fork 改依赖包源码的第三方工具
android·前端·flutter
程序员老刘5 天前
跑分第一的编程大模型,我为啥不用?
flutter·ai编程·vibecoding
恋猫de小郭6 天前
苹果 AirPods 协议,Android 也可以使用完整版 AirPods 能力
android·前端·flutter