Material widgets库中提供了Material风格的单选开关Switch和复选框Checkbox,它们都是继承自StatelessWidget,所以它们本身不会保存当前选择状态,所以一般都是在父widget中管理选中状态。当用户点击Switch或Checkbox时,它们会触发onChanged回调,我们可以在此回调中处理选中状态改变逻辑。我们看一个简单的示例:

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
class _home extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _homeState();
}
}
class _homeState extends State<_home> {
bool _switchSelected=true; //维护单选开关状态
bool _checkboxSelected=true;//维护复选框状态
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: Text("title"),
centerTitle: true,
),
body:new Column(
children: <Widget>[
Switch(//传入value和onChanged,传入value按钮初始化状态,onChanged状态改变回调
value: _switchSelected,
activeColor: Colors.red,
onChanged: (value){
setState(() {//setState动态更新
_switchSelected=value;
});
},
),
Checkbox(
value: _checkboxSelected,
activeColor: Colors.greenAccent,
onChanged: (value){
setState(() {
_checkboxSelected=value;
});
},
)
],
)
);
}
}

Checkbox没有设置setState因此点击没有动态更新

上面代码中,由于要维护Switch和Checkbox状态,所以SwitchAndCheckBoxTestRoute继承自StatefulWidget 。在其build方法中分别构建了一个Switch和Checkbox,初始状态都为选中状态,当用户点击时,会将状态置反,然后回调用setState()通知framework重新构建UI。
它们都有一个activeColor属性,用于设置激活态的颜色。至于大小,到目前为止,Checkbox的大小是固定的,无法自定义,而Switch只能定义宽度,高度也是固定的。值得一提的是Checkbox有一个属性tristate ,表示是否为三态,其默认值为false ,这时Checkbox有两种状态即“选中”和“不选中”,对应的value值为true和false ;如果其值为true时,value的值会增加一个状态null,读者可以自行了解。