文章目录
- 1 概念介绍
- 2 使用方法
- 3 示例代码
我们在上一章回中介绍了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相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!


![[极客大挑战 2019]Knife1](https://i-blog.csdnimg.cn/direct/d80fbc8774bc415b8347eb9046c34b73.png)






![[STM32 标准库]定时器输出PWM配置流程 PWM模式解析](https://i-blog.csdnimg.cn/direct/30a616a6baf84b978237a57b09ed22c5.png##pic_center)








