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 {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SwitchDemo(),
);
}
}
class SwitchDemo extends StatefulWidget {
@override
_SwitchDemoState createState() => _SwitchDemoState();
}
class _SwitchDemoState extends State<SwitchDemo> {
bool _isSwitched = false;
@override
Widget 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,
)
],
),
),
);
}
}
