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

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

应用场景

  1. 功能启用/禁用

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

  1. 用户设置项

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

  1. 状态指示控制

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

常用属性及说明

属性名称 作用 默认值
开关初始值 控制开关默认是开启还是关闭 关闭
控制开关组件整体宽度 55
控制开关组件整体高度 26
活跃轨道颜色 开关开启状态下轨道的背景颜色 #FF8BC34A
非活跃轨道颜色 开关关闭状态下轨道的背景颜色 #FF9E9E9E
活跃凸轮颜色 开关开启状态下滑块(凸轮)的颜色 #FFFFFFFF
非活跃凸轮颜色 开关关闭状态下滑块颜色 #FFFFFFFF
轨道边框高度 控制轨道边框的宽度 0
凸轮边框高度 控制滑块(凸轮)的边框线宽 0
活跃轨道边框颜色 开启状态下轨道边框颜色 #FF40C4FF
非活跃轨道边框颜色 关闭状态下轨道边框颜色 #1F000000
活跃凸轮边框颜色 开启状态下滑块边框颜色 #FFFFFFFF
非活跃凸轮边框颜色 关闭状态下滑块边框颜色 #1F000000
相关推荐
小蜜蜂嗡嗡11 小时前
flutter image_cropper截图控件布局顶到状态栏中问题
flutter
程序员老刘16 小时前
跨平台开发地图:大厂统一底层,五月框架大乱斗谁在干实事?| 2026年5月
flutter·客户端
环信即时通讯云18 小时前
环信Flutter UIKit适配鸿蒙实战指南
flutter·华为·harmonyos
用户5368221001820 小时前
flutter学习笔记 - Dart基本语法(一)
flutter
用户游民21 小时前
Flutter Provider原理以及用法
前端·flutter
qq_14030341441 天前
flutter
flutter
程序员老刘2 天前
为什么AI不会淘汰Flutter,反而让它更吃香了
flutter·ai编程·客户端
蝎子莱莱爱打怪2 天前
我花两年业余时间做了个IM系统,然后呢😂??
后端·flutter·面试
Swuagg2 天前
Flutter EventBus 架构设计:基于 Stream 的事件总线实现与实践
flutter·eventbus·事件总线