Flutter入門筆記系列文章部分內(nèi)容來源于《Flutter 實(shí)戰(zhàn)》座硕，如有侵權(quán)請聯(lián)系刪除炭懊！
Material 組件庫中提供了Material風(fēng)格的單選開關(guān)Switch和復(fù)選框Checkbox，雖然它們都是繼承自StatefulWidget，但它們本身不會(huì)保存當(dāng)前選中狀態(tài)血当，選中狀態(tài)都是由父組件來管理的翘贮。當(dāng)Switch或Checkbox被點(diǎn)擊時(shí)赊窥，會(huì)觸發(fā)它們的onChanged回調(diào)，我們可以在此回調(diào)中處理選中狀態(tài)改變邏輯狸页。
首先看一個(gè)簡單的例子：
bool checkboxState = false; //CheckBox狀態(tài)
bool switchState = false; //Switch狀態(tài)
……
Row(
mainAxisAlignment: MainAxisAlignment.center,
textDirection: TextDirection.ltr,
children: <Widget>[
Checkbox(
value: checkboxState,
activeColor: Colors.blue,
onChanged: (value) {
setState(() {
checkboxState = value;
});
}),
Text(checkboxState ? "選中" : "未選中"),
],
),
Switch(
value: switchState,
activeColor: Colors.green,
onChanged: (value) {
setState(() {
switchState = value;
});
})
運(yùn)行效果：
Switch和Checkbox初始狀態(tài)都為未選中狀態(tài)锨能，當(dāng)用戶點(diǎn)擊時(shí)，會(huì)將狀態(tài)置反芍耘，然后回調(diào)用setState()通知Flutter framework重新構(gòu)建UI址遇。
屬性介紹
下面以Switch控件為例：
const Switch({
Key key,
@required this.value, //true：開， false：關(guān)
@required this.onChanged, //狀態(tài)變化時(shí)的回調(diào)方法
this.activeColor, //打開狀態(tài)下顏色
this.activeTrackColor, //打開狀態(tài)下track顏色
this.inactiveThumbColor, //關(guān)閉狀態(tài)thumb顏色
this.inactiveTrackColor, //關(guān)閉狀態(tài)track顏色
this.activeThumbImage, //打開狀態(tài)下thumb圖片
this.inactiveThumbImage, //關(guān)閉狀態(tài)下thumb圖片
this.materialTapTargetSize, //點(diǎn)擊區(qū)域
})
注：track表示的是開關(guān)劃過的路徑斋竞，thumb表示的是小圓圈倔约。
簡單測試一下這些屬性的作用：
Switch(
value: switchState,
activeColor: Colors.green,
inactiveThumbColor: Colors.blue,
activeTrackColor: Colors.red,
inactiveTrackColor: Colors.grey,
onChanged: (value) {
setState(() {
switchState = value;
});
})
運(yùn)行效果
Switch(
value: switchState,
inactiveThumbImage: NetworkImage("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2559565322,2534358279&fm=15&gp=0.jpg"),
activeThumbImage: AssetImage("images/star_icon.png"),
onChanged: (value) {
setState(() {
switchState = value;
});
})
運(yùn)行效果
Switch和Checkbox屬性比較簡單，讀者可以查看API文檔坝初，它們都有一個(gè)activeColor屬性浸剩，用于設(shè)置激活態(tài)的顏色。至于大小鳄袍，到目前為止绢要，Checkbox的大小是固定的，無法自定義畦木，而Switch只能定義寬度袖扛，高度也是固定的。值得一提的是Checkbox有一個(gè)屬性tristate 十籍，表示是否為三態(tài)蛆封，其默認(rèn)值為false ，這時(shí)Checkbox有兩種狀態(tài)即“選中”和“不選中”勾栗，對應(yīng)的value值為true和false 惨篱。如果tristate值為true時(shí)，value的值會(huì)增加一個(gè)狀態(tài)null围俘，讀者可以自行了解砸讳。
通過Switch和Checkbox我們可以看到，雖然它們本身是與狀態(tài)（是否選中）關(guān)聯(lián)的界牡，但它們卻不是自己來維護(hù)狀態(tài)簿寂，而是需要父組件來管理狀態(tài)，然后當(dāng)用戶點(diǎn)擊時(shí)宿亡，再通過事件通知給父組件常遂，這樣是合理的，因?yàn)镾witch和Checkbox是否選中本就和用戶數(shù)據(jù)關(guān)聯(lián)挽荠，而這些用戶數(shù)據(jù)也不可能是它們的私有狀態(tài)克胳。我們在自定義組件時(shí)也應(yīng)該思考一下哪種狀態(tài)的管理方式最為合理平绩。
