1. 基本介绍

Switch 是一个常见的选择器。

2. 示例代码

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

3. Switch 属性介绍

Switch属性	介绍
value	@required bool，value = true 时为打开状态，false 关闭
onChanged	点击事件
activeColor	打开状态下滑块颜色
activeTrackColor	打开状态下轨道颜色
inactiveThumbColor	关闭状态下滑块颜色
inactiveTrackColor	关闭状态下轨道颜色
activeThumbImage	打开状态下滑块图片
onActiveThumbImageError	打开状态下滑块图片加载失败回调
inactiveThumbImage	关闭状态下滑块图片
onInactiveThumbImageError	关闭状态下滑块图片加载失败回调
materialTapTargetSize	内边距，默认最小点击区域为 48 * 48，MaterialTapTargetSize.shrinkWrap 为组件实际大小
dragStartBehavior	启动阻力，默认为 DragStartBehavior.start
mouseCursor	鼠标光标
focusColor	聚焦颜色
hoverColor	悬停颜色
focusNode	焦点控制，Flutter 组件之 FocusNode 详解
autofocus	自动聚焦，默认为 false

4. Switch 详解

4.1 容器创建

import 'package:flutter/material.dart';

class FMSwitchVC extends StatefulWidget{
  @override
  FMSwitchState createState() => FMSwitchState();
}

class FMSwitchState extends State <FMSwitchVC> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Switch"),),
      body: Center(
        child: _switch(),
      ),
    );
  }

  bool switchValue = true;

  Switch _switch(){
    return Switch(
        value: switchValue,
        onChanged: (value){
          switchValue = !switchValue;
          setState(() {

          });
        }
    );
  }
}

4.2 点击事件

使用 onChanged 捕捉点击事件，并对状态进行记录，更新控件，完成一个可以反复点击的效果。

Switch normal.gif

4.3 颜色

  Switch _switch(){
    return Switch(
        value: switchValue,
        activeColor: Colors.red,
        activeTrackColor: Colors.blue,
        inactiveThumbColor: Colors.yellow,
        inactiveTrackColor: Colors.cyan,

        onChanged: (value){
          switchValue = !switchValue;
          print(value);
          setState(() {

          });
        }
    );
  }

颜色	效果
activeColor	(打开时滑块颜色 Colors.red) Switch activeColor.png
activeTrackColor	(打开时轨道颜色 Colors.blue) Switch activeTrackColor.png
inactiveThumbColor	(关闭时滑块颜色 Colors.yellow) Switch inactiveThumbColor.png
inactiveTrackColor	(关闭时轨道颜色 Colors.cyan) Switch inactiveTrackColor.png

4.4 图片

不会导入、使用图片的请看这里，Flutter入门（9）：Flutter 组件之 Image、AssetImage 详解

  Switch _switch(){
    return Switch(
        value: switchValue,
        activeColor: Colors.red,
        activeTrackColor: Colors.blue,
        inactiveThumbColor: Colors.yellow,
        inactiveTrackColor: Colors.cyan,

        activeThumbImage: AssetImage('images/base_widgets/bear_white.png'),
        inactiveThumbImage: AssetImage('images/base_widgets/bear_brown.png'),

        onChanged: (value){
          switchValue = !switchValue;
          print(value);
          setState(() {

          });
        }
    );
  }

图片	效果
activeThumbImage	Swtich activeThumbImage.png
inactiveThumbImage	Switch inactiveThumbImage.png

4.5 图片错误回调

onActiveThumbImageError 与 onInactiveThumbImageError 分别是选中和未选中状态下，滑块图片错误回调。一般来说本地图片不会有什么问题，当加载网络图片时，有时候就会出现这个问题。

我们来给 activeThumbImage 与 inactiveThumbImage 两个错误的网络地址，当拿不到正确的图片时，就会走错误回调了。

  Switch _switch(){
    return Switch(
        value: switchValue,
        activeColor: Colors.red,
        activeTrackColor: Colors.blue,
        inactiveThumbColor: Colors.yellow,
        inactiveTrackColor: Colors.cyan,

        activeThumbImage: NetworkImage("https://activeThumbImage"),
        inactiveThumbImage: NetworkImage("https://inactiveThumbImage"),

        // activeThumbImage: AssetImage('images/base_widgets/bear_white.png'),
        // inactiveThumbImage: AssetImage('images/base_widgets/bear_brown.png'),

        onActiveThumbImageError: (error, stack){
          print("onActiveThumbImageError = $error");
        },

        onInactiveThumbImageError: (error, stack){
          print("onInactiveThumbImageError = $error");
        },

        onChanged: (value){
          switchValue = !switchValue;
          print(value);
          setState(() {

          });
        }
    );
  }

当点击 Switch 时，会有如下报错

flutter: onInactiveThumbImageError = SocketException: Failed host lookup: 'inactivethumbimage' (OS Error: nodename nor servname provided, or not known, errno = 8)
flutter: onActiveThumbImageError = SocketException: Failed host lookup: 'activethumbimage' (OS Error: nodename nor servname provided, or not known, errno = 8)

Switch errors.png

5. 技术小结

Switch 控件的应用场景不是特别多，多加练习很容易掌握。