CupertinoSwitch 是 iOS 風(fēng)格的 switch 開關(guān)，相當(dāng)于 UISwitch。
1. CupertinoSwitch
CupertinoSwitch 定義
const CupertinoSwitch({
Key? key,
required this.value,
required this.onChanged,
this.activeColor,
this.trackColor,
this.thumbColor,
this.dragStartBehavior = DragStartBehavior.start,
})
CupertinoSwitch
| 屬性 | 介紹 |
|---|---|
| value | @required 當(dāng)前 switch 的開關(guān) |
| onChanged | @required |
| activeColor | 開關(guān)打開時，軌道顏色 |
| trackColor | 開關(guān)關(guān)閉時，軌道顏色 |
| thumbColor | 滑塊顏色 |
| dragStartBehavior | 拖拽效果，默認(rèn)為 start 更為平滑，為 down 時有明顯吸附效果，默認(rèn)為 DragStartBehavior.start |
2. 示例
class _MSCupertinoSwitchDemo1State extends State<MSCupertinoSwitchDemo1> {
bool _switchValue1 = false;
bool _switchValue2 = false;
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar:
CupertinoNavigationBar(middle: Text("MSCupertinoSwitchDemo1")),
child: SafeArea(
child: Center(
child: Column(
children: [
CupertinoSwitch(
value: _switchValue1,
activeColor: Colors.yellow, // 選中時 軌道顏色
thumbColor: Colors.orange, // 滑塊顏色
trackColor: Colors.cyan[200], // 未選中時 軌道顏色
onChanged: (value) {
_switchValue1 = value;
setState(() {});
},
),
SizedBox(height: 20),
CupertinoSwitch(
value: _switchValue2,
activeColor: Colors.tealAccent, // 選中時 軌道顏色
thumbColor: Colors.red, // 滑塊顏色
trackColor: Colors.grey[200], // 未選中時 軌道顏色
dragStartBehavior: DragStartBehavior.down,// 默認(rèn)start 更為平滑，為 down 時有明顯吸附效果
onChanged: (value) {
_switchValue2 = value;
setState(() {});
},
),
],
),
),
),
);
}
}
92.gif
