Flutter入门（49）：Flutter 组件之 CupertinoSwitch 详解

1. 基本介绍

CupertinoSwitch 是 iOS 风格的 switch 开关，相当于 UISwitch。

switch off.png

switch on.png

更多相关 Switch 插件可以看这里 -> Flutter入门（31）：Flutter 组件之 Switch 详解

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

CupertinoSwitch 属性	介绍
value	@required 当前 switch 的开关
onChanged	@required
activeColor	开关打开时，轨道颜色
trackColor	开关关闭时，轨道颜色
dragStartBehavior	拖拽效果，默认为 start 更为平滑，为 down 时有明显吸附效果，默认为 DragStartBehavior.start

4. CupertinoSwitch 详解

CupertinoSwitch 作为 iOS 风格的组件，它的属性非常少，demo 中备注的很详细了。

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class FMCupertinoSwitchVC extends StatefulWidget{
  @override
  FMCupertinoSwitchState createState() => FMCupertinoSwitchState();
}

class FMCupertinoSwitchState extends State  {
  bool _switchValue = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text("CupertinoSwitch"),
      ),
      child: _safeArea(),
    );
  }

  SafeArea _safeArea(){
    return SafeArea(
      child: Column(
        children: [
          Text("Normal Switch",
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.normal,
              decoration: TextDecoration.none,
            ),
          ),
          _cupertinoSwitch(),
          Text("Custom Switch",
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.normal,
              decoration: TextDecoration.none,
            ),
          ),
          _customSwitch(),
        ],
      ),
    );
  }

  CupertinoSwitch _cupertinoSwitch(){
    return CupertinoSwitch(
      // 当前 switch 的开关
      value: _switchValue,
      // 点击或者拖拽事件
      onChanged: (value){
        _switchValue = value;

        setState(() {

        });
      },
    );
  }

  CupertinoSwitch _customSwitch(){
    return CupertinoSwitch(
      // 当前 switch 的开关
      value: _switchValue,
      activeColor: Colors.red, // 开关打开时，轨道颜色
      trackColor: Colors.yellow, // 开关关闭时，轨道颜色
      dragStartBehavior: DragStartBehavior.down, // 拖拽效果，默认为 start 更为平滑，为 down 时有明显吸附效果
      onChanged: (value){
        _switchValue = value;
        
        setState(() {

        });
      },
    );
  }
}

注意留意图中上下两个拖拽的细节，上方更为平滑，而下方会有个明显吸附效果。

Switch.gif

5. 技术小结

CupertinoSwitch 属性非常简单，来了解一下吧。