本片博文沒啥技術含量，就是簡單的介紹一下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
本篇博文到此結束，這兩個組件使用起來也很簡單，就不在多做說明。
---------------------