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

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

应用场景

  1. 功能启用/禁用

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

  1. 用户设置项

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

  1. 状态指示控制

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

常用属性及说明

属性名称 作用 默认值
开关初始值 控制开关默认是开启还是关闭 关闭
控制开关组件整体宽度 55
控制开关组件整体高度 26
活跃轨道颜色 开关开启状态下轨道的背景颜色 #FF8BC34A
非活跃轨道颜色 开关关闭状态下轨道的背景颜色 #FF9E9E9E
活跃凸轮颜色 开关开启状态下滑块(凸轮)的颜色 #FFFFFFFF
非活跃凸轮颜色 开关关闭状态下滑块颜色 #FFFFFFFF
轨道边框高度 控制轨道边框的宽度 0
凸轮边框高度 控制滑块(凸轮)的边框线宽 0
活跃轨道边框颜色 开启状态下轨道边框颜色 #FF40C4FF
非活跃轨道边框颜色 关闭状态下轨道边框颜色 #1F000000
活跃凸轮边框颜色 开启状态下滑块边框颜色 #FFFFFFFF
非活跃凸轮边框颜色 关闭状态下滑块边框颜色 #1F000000
相关推荐
风华圆舞3 分钟前
一个 Flutter 项目同时保留 Android、iOS、HarmonyOS 支持的实践
android·flutter·ios
G_dou_20 分钟前
Flutter三方库适配OpenHarmony【habit_tracker】习惯追踪器项目完整实战
flutter·harmonyos
风华圆舞1 小时前
Flutter 项目接入 HarmonyOS 的完整工程结构解析
flutter·华为·harmonyos
●VON1 小时前
AtomGit Flutter鸿蒙客户端:通知系统
flutter·华为·跨平台·harmonyos·鸿蒙
zeqinjie13 小时前
Flutter 折叠屏 iPad / 宽屏适配实践
android·前端·flutter
程序员老刘17 小时前
本地跑Gemma 4 12B写Flutter:是惊喜还是崩溃
flutter·ai编程
暗冰ཏོ17 小时前
Flutter 从入门到项目实战:Dart 基础、跨平台开发、App 架构与上线发布完整指南
flutter·架构·app·安卓·应用开发
brycegao19 小时前
Flutter Dart JSON 解析必坑!金额精度丢失为什么必须在网络层处理?附工业级解决方案
flutter·dart
tangweiguo0305198719 小时前
Flutter GetIt 完全指南:告别 BuildContext 依赖的终极方案
flutter