Flutter笔记55:Switch开关组件

Switch开关组件比较常用，定义方法也比较简单，在使用inactiveThumbImage和activeThumbImage作为背景图片时，最好是通过ps处理的比较小的圆图：

class _DemoPageState extends State<DemoPage> {
  bool check = false;
  bool check2 = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        //用sizedBox控制大小
        SizedBox(
          width: 100.0,
          height: 30.0,
          //创建方式一：
          child: Switch(
            value: check,
            //激活的圆点颜色
            activeColor: Colors.orange,
            //激活时轨道颜色（不定义，则轨道颜色就是浅一点的圆点颜色
            activeTrackColor: Colors.pink,
            //激活时原点背景图
            activeThumbImage: NetworkImage('url'),
            //非激活圆点颜色
            inactiveThumbColor: Colors.green,
            //非激活时滑轨颜色
            inactiveTrackColor: Colors.blueGrey,
            //非激活时原点背景图
            inactiveThumbImage: NetworkImage('url'),
            onChanged: (bool val) {
              setState(() {
                check = !check;
              });
            },
          ),
        ),
        //创建方式二：
        Switch.adaptive(
          //激活的圆点颜色
          activeColor: Colors.red,
          value: check2,
          onChanged: (bool val) {
            setState(() {
              check2 = !check2;
            });
          },
        )
      ],
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！