簡(jiǎn)介
Material widgets庫(kù)中提供了Material風(fēng)格的單選開關(guān)Switch和復(fù)選框Checkbox桨踪，它們都是繼承自StatelessWidget抠藕，所以它們本身不會(huì)保存當(dāng)前選擇狀態(tài)躬厌，所以一般都是在父widget中管理選中狀態(tài)。當(dāng)用戶點(diǎn)擊Switch或Checkbox時(shí)口渔，它們會(huì)觸發(fā)onChanged回調(diào)御铃，我們可以在此回調(diào)中處理選中狀態(tài)改變邏輯。
運(yùn)行效果
這兩個(gè)widgets比較簡(jiǎn)單歧焦，故寫在一起移斩，效果與打印如下：
運(yùn)行效果.gif
children: <Widget>[
Switch(
// 滑動(dòng)開關(guān)時(shí)光圈顏色
activeColor: Colors.red,
// 開關(guān)開和關(guān)的軌道背景色
activeTrackColor: Colors.orange,
inactiveTrackColor: Colors.green,
// 開關(guān)頭背景色，若同時(shí)有圖片，則圖片優(yōu)先
inactiveThumbColor: Colors.yellow,
// 開關(guān)頭上的開或者關(guān)的圖片
activeThumbImage: AssetImage('images/1.png'),
inactiveThumbImage: AssetImage('images/2.png'),
//設(shè)置為MaterialTapTargetSize.shrinkWrap時(shí)向瓷，clip距頂部距離為0肠套；
// 設(shè)置為MaterialTapTargetSize.padded時(shí)距頂部有一個(gè)距離
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
value: _switchSelected,
onChanged: (value) {
_handleSwitch(value);
}),
Checkbox(
// 屬性tristate，表示是否為三態(tài)猖任，其默認(rèn)值為false
// 這時(shí)Checkbox有兩種狀態(tài)即“選中”和“不選中”你稚，對(duì)應(yīng)的value值為true和false ；
// 如果其值為true時(shí)超升，value的值會(huì)增加一個(gè)狀態(tài)null入宦。
tristate: true,
activeColor: Colors.red,
value: _checkBoxSelected,
onChanged: (value) {
_handleCheckBox(value);
})
]
點(diǎn)擊方法回調(diào)
_handleCheckBox(value) {
setState(() {
print(value);
_checkBoxSelected = value;
});
}
Checkbox 注意點(diǎn)
checkbox有一個(gè)屬性tristate ，表示是否為三態(tài)室琢，其默認(rèn)值為false 乾闰，這時(shí)Checkbox有兩種狀態(tài)即“選中”和“不選中”，對(duì)應(yīng)的value值為true和false 盈滴；如果其值為true時(shí)涯肩，value的值會(huì)增加一個(gè)狀態(tài)null，上述動(dòng)圖的打印結(jié)果就是驗(yàn)證巢钓。
