如何实现滑动开关功能

1 概念介绍

我们在这里介绍的Switch是指左右滑动的开关，常用来表示某项设置是打开还是关闭。Flutter中使用Switch类表示该Widget。本章回中将详细介绍它的用法。

2 使用方法

和其它和Widget一样，Switch提供了一些属性来控制自己，接下来我们将介绍这些常用的属性：

• value属性，该属性表示开关的状态，它有两个值true和false，分别表示Switch打开和关闭；
• onChanged属性，该属性是一个方法，当开关的状态发生变化时回调它，从方法的参数中可以得到开关的状态；
• activeColor属性，该属性表示开关打开时的颜色，如果不设置默认为绿色；
• inactiveThumbColor属性，该属性表示开关关闭时图片的颜色，如果不指定默认为灰色；
• inactiveTrackColor属性，该属性表示开关关闭时轨道的颜色，如果不指定默认为灰色；
  注意：开关打开时的颜色通过一个属性可以控制，关闭时的颜色通过两个属性来控制。我们在这里说的图片是指开关上的小圆形，该图片可以通过相关的属性来修改。轨道
  是指开关滑动时的轨迹。上面介绍的属性中前两个是必选属性，其它属性是可选属性；

3 示例代码

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.purpleAccent,
      title: const Text("Example of Switch Widget"),
    ),
    body: Container(
      color: Colors.lightBlue,
      alignment: Alignment.center,
      width: 92,
      height: 92,
      child: Switch(
        //开关打开时的颜色
        activeColor: Colors.purpleAccent,
        //开关没有打开时的颜色
        inactiveThumbColor: Colors.yellow,
        inactiveTrackColor: Colors.yellow,
        value: setValue,
        onChanged: (v) {
          print("value is ${v}");
          setState(() {
            setValue = v;
          });
        },
      ),
    ),
  );
}

上面的代码中，我们把Switch放到了容器中，并且使用不同的颜色来突出开关的效果。此外，我们在onChanged属性对应的方法中通过setState()方法修改了value
属性的值，这样可以让开关与滑动保持联动，如果不这样做，滑动开关时它的状态会变化，松开开关后它会自动恢复成初始状态.在上面的代码中我本来想通过Switch外
面的容器来修改它的大小，但是发现没有效果，目前还没有找到合适的方法来修改它的大小，以后找到后再和大家分享。
看官们，关于Switch Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!