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
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
如果想要CupertinoSwitch不可改变状态的话，则把上面的onChanged设置为null即可，即：

@override
Widget build(BuildContext context) {
return CupertinoSwitch(
value: true,///默认打开且禁止关闭
activeColor: Colors.blue,///自定义颜色为蓝色
onChanged: null
);
}
1
2
3
4
5
6
7
8
另外这个组件用到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; });
},
);
1
2
3
4
5
6
7
8
9
10
11
12
当然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;
});
}
),
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
当然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((http://www.my516.com) {
switchValue = value;
});
})
],
));

}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
本篇博文到此结束，这两个组件使用起来也很简单，就不在多做说明。
---------------------