Flutter之CupertinoSwitch和Switch开关组件的简单使用

本片博文没啥技术含量，就是简单的介绍一下CupertinoSwitch组件的使用方式。先来看看具体的运行效果：

单从运行效果来看我们可以知道：
1、CupertinoSwitch可以自主设置打开状态的颜色，比如上图中的绿色和蓝色
2、可以控制 开关是否能用

下面来看看具体的设置，CupertinoSwitch有三个属性：
value：布尔类型的值，true表示打开开关，false表示关闭开关
activeColor：Color类型，设置打开时的颜色，比如上图的绿色和蓝色。关于Flutter Color的详细说明，可以参考博主的这篇博客，其中activitColor默认是绿色的，可以根据自己的需要来设定所需颜色
onChanged：函数类型，用来控制开关的关闭和打开，当onChanged函数传null值的时候就是禁止改变CupertinoSwitch的开闭状态。

所以其使用还是很简单的：

 bool _switchValue = false;
  @override
  Widget build(BuildContext context) {
    return  CupertinoSwitch(
        value: _switchValue,
     
        onChanged: (bool value) {///点击切换开关的状态
           setState(() {
               _switchValue = value;
           });
        }///end onChanged
    );
  }

如果想要CupertinoSwitch不可改变状态的话，则把上面的onChanged设置为null即可，即：

  @override
  Widget build(BuildContext context) {
    return  CupertinoSwitch(
        value: true,///默认打开且禁止关闭
        activeColor:  Colors.blue,///自定义颜色为蓝色
        onChanged: null
    );
  }

另外这个组件用到ListView的item中也很简单，实力代码如下：

  ListTile(///ListTile是Flutter ListView的item组件
            title: Text('ListView item 中嵌入CupertinoSwitch'),
            trailing: CupertinoSwitch(
                value: _switchValue,
                onChanged: (bool value) {
                 setState(() { _switchValue = value; });
                 },
             ),
             onTap: () {///点击item，同时切换CupertinoSwitch的开关状态
              setState(() { _switchValue = !_switchValue; });
              },
    );

---

当然Flutter还提供了一个Switch组件,这个组件提供了除了提供了上述CupertinoSwitch一样的功能之外，还提供了更丰富的细微控制,比如还提供了activeTrackColor，inactiveThumbColor，inactiveTrackColor，activeThumbImage，inactiveThumbImage等属性。
比如如果你在ListView做一个item使用的话，可以如下使用如下代码：

 ListTile(///ListTile是Flutter ListView的item组件
      title: Text('可以打开和关闭'),
      onTap: (){
        setState(() {
          switchValue = !switchValue;
        });
      },
      ///使用Switch.adaptive
      trailing: Switch.adaptive(
          value: switchValue,
          onChanged: (bool value) {
            setState(() {
              switchValue = value;
            });
          }
      ),
    ),

当然Fullter考虑的更全面，给我们提供了一个SwitchListTile配合ListView使用，简单的运行效果可以通过来图来直观的了解：

顺便附上上图的源码：

import 'package:flutter/material.dart';

class SwitchDemo extends StatefulWidget {
  @override
  _SwitchState createState() => _SwitchState();
}

bool switchValue = false;

class _SwitchState extends State<SwitchDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Center(child: Text("Switch的简单使用系列")),
          elevation: 0.0,
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              ///ListTile是Flutter ListView的item组件
              title: Text('默认打开，且禁止关闭'),
              trailing: Switch.adaptive(
                  value: true, activeColor: Colors.red, onChanged: null),
            ),
            ListTile(
              ///ListTile是Flutter ListView的item组件
              title: Text('默认关闭，且禁止打开'),
              trailing: Switch.adaptive(value: false, onChanged: null),
            ),
            ListTile(
              ///ListTile是Flutter ListView的item组件
              title: Text('可以打开和关闭(打开设置为红色)'),
              onTap: () {
                setState(() {
                  switchValue = !switchValue;
                });
              },

              ///使用Switch.adaptive
              trailing: Switch.adaptive(
                  value: switchValue,
                  activeColor: Colors.red,
                  onChanged: (bool value) {
                    setState(() {
                      switchValue = value;
                    });
                  }),
            ),
            SwitchListTile(
                title: Text('SwitchListTile的简单使用（默认打开蓝色）'),
                value: switchValue,
                onChanged: (bool value) {
                  setState(() {
                    switchValue = value;
                  });
                })
          ],
        ));

   
  }
}

本篇博文到此结束，这两个组件使用起来也很简单，就不在多做说明。