如何实现滑动开关功能

我们在上一章回中介绍了PageView这个Widget,本章回中将介绍Switch Widget.闲话休提，让我们一起Talk Flutter吧。

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相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!