Switch 构造函数的样式
const Switch({Key? key,required this.value, // 当前开关的状态，布尔值（true 表示打开，false 表示关闭）required this.onChanged, // 状态切换时的回调函数，执行您定义的逻辑this.activeColor, // 开关打开时圆形部分的颜色this.activeTrackColor, // 开关打开时轨道的颜色this.inactiveThumbColor, // 开关关闭时圆形部分的颜色this.inactiveTrackColor, // 开关关闭时轨道的颜色this.activeThumbImage, // 开关打开时圆形部分的图片this.inactiveThumbImage, // 开关关闭时圆形部分的图片this.materialTapTargetSize, // 调整触摸区域的大小this.dragStartBehavior = DragStartBehavior.start, // 控制拖动行为
});
CupertinoSwitch 构造函数的样式
const CupertinoSwitch({Key? key, // 小部件的唯一标识符required this.value, // 当前开关的状态，布尔值，true 为打开，false 为关闭required this.onChanged, // 当开关状态改变时的回调函数，接受新的状态 (bool) 作为参数this.activeColor = CupertinoColors.systemGreen, // 开关打开时，圆形部分的颜色（默认为绿色）this.trackColor, // 开关关闭时轨道的颜色（默认浅灰色，某些版本需要自行设置）this.thumbColor, // 开关滑块的颜色（默认为白色）this.dragStartBehavior = DragStartBehavior.start, // 拖动行为，定义用户如何开始拖动开关
});
CupertinoSwitch和Switch的区别
| 属性 | CupertinoSwitch | Switch |
|---|
| 平台风格 | 模拟 iOS 系统的开关样式，符合 iOS 设计规范 | 主要是 Android 风格的开关，符合 Material Design 规范 |
| 默认外观 | 具有 iOS 风格的滑块和轨道，滑块为圆形，整体呈现圆滑且简洁的外观 | 具有 Material Design 风格，开关较大，颜色和样式上更偏向 Android |
| 外观定制 | 支持 activeColor、trackColor、thumbColor、dragStartBehavior 等定制项 | 支持 activeColor、inactiveTrackColor、inactiveThumbColor、activeTrackColor、thumbColor 等定制项 |
| 使用场景 | 通常在 iOS 风格的应用中使用 | 通常在 Android 风格的应用中使用或跨平台应用中使用 |
| 交互体验 | 更符合 iOS 的交互方式，支持滑动并且视觉上简洁 | 适合 Android 风格的交互，支持点击或拖动触发 |
| 位置 | 位于 flutter/cupertino.dart 包中 | 位于 flutter/material.dart 包中 |
| 自定义样式 | CupertinoSwitch 的外观与默认值深度绑定，更难做到深度定制 | Switch 更灵活，允许更详细的颜色、轨道、滑块样式定制 |
示例代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: SwitchDemo(),);}
}class SwitchDemo extends StatefulWidget {@override_SwitchDemoState createState() => _SwitchDemoState();
}class _SwitchDemoState extends State<SwitchDemo> {bool _isSwitched = false;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Switch 示例')),body: Center(child: Column(children: [Switch(value: _isSwitched,onChanged: (bool value) {setState(() {_isSwitched = value;});},activeColor: Colors.green, // 打开时的颜色inactiveThumbColor: Colors.red, // 关闭时圆形部分的颜色inactiveTrackColor: Colors.grey, // 关闭时轨道的颜色),CupertinoSwitch(value: _isSwitched,onChanged: (bool value) {setState(() {_isSwitched = value;});},activeColor: CupertinoColors.activeGreen,trackColor: CupertinoColors.systemGrey,)],),),);}
}
