Flutter 之 CupertinoSwitch （iOS风格

CupertinoSwitch 是 iOS 风格的 switch 开关，相当于 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

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,// 默认start 更为平滑，为 down 时有明显吸附效果
                onChanged: (value) {
                  _switchValue2 = value;
                  setState(() {});
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}