本章說一下 單選框(Switch) 和 核取方塊(Checkbox)
單選框(Switch)
因為按鈕都是有狀態的，所以在建立模板的時候，一定要建立有狀態的模板（使用快捷鍵stf建立），核取按鈕也一樣
但是這些按鈕本身不會儲存當前選擇狀態，因此它們的選中狀態都是由父元件來管理的。
但是當你點選的時候會觸發他們的onChange函式，我們可以在此函式中處理程式碼邏輯。
原始碼示例
建構函式如下：
const Switch({
Key key,
@required this.value,
@required this.onChanged,
this.activeColor,
this.activeTrackColor,
this.inactiveThumbColor,
this.inactiveTrackColor,
this.activeThumbImage,
this.inactiveThumbImage,
this.materialTapTargetSize,
this.dragStartBehavior = DragStartBehavior.start,
})
複製程式碼其中value和onChange是必選屬性
屬性解釋
value
即按鈕當前的狀態是選中還是不選中，值為true或者false
onChanged
當按鈕改變狀態時，程式碼的執行邏輯
activeColor、 activeTrackColor
這兩個屬性都是在按鈕選中狀態下顯示按鈕的顏色
activeColor顯示的是按鈕的顏色
activeTrackColor顯示的是按鈕裡面的顏色
程式碼示例：
class _CategoryPageState extends State<CategoryPage> {
bool _switchSelected = true; //維護單選開關狀態
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Switch(
value: _switchSelected, //當前狀態，必填
onChanged: (value) { //必填，改變狀態後執行的程式碼邏輯
//重新構建頁面
setState(() {
_switchSelected = value;
});
},
activeColor:Colors.red, //選中後按鈕的顏色，預設是藍色
activeTrackColor:Colors.yellow, //選中後按鈕裡面的顏色
),
],
),
);
}
}
複製程式碼執行效果：
inactiveThumbColor、inactiveTrackColor
表示按鈕未選中狀態下按鈕的顏色
程式碼示例：
class _CategoryPageState extends State<CategoryPage> {
bool _switchSelected = true; //維護單選開關狀態
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Switch(
value: _switchSelected, //當前狀態，必填
onChanged: (value) { //必填
//重新構建頁面
setState(() {
_switchSelected = value;
});
},
activeColor:Colors.red, //選中後按鈕的顏色，預設是藍色
activeTrackColor:Colors.yellow, //選中後按鈕裡面的顏色
inactiveThumbColor:Colors.pink, //未選中按鈕的顏色
inactiveTrackColor:Colors.green, ////未選中按鈕裡面的顏色
),
],
),
);
}
}
複製程式碼執行效果：
activeThumbImage、inactiveThumbImage
當該開關開啟或者關閉時在該開關的大拇指上使用的影象。
如果這個開關是用switch建立的，則忽略它。
一般不使用，不做過多介紹
materialTapTargetSize
配置點選目標的最小大小,引數有padded、shrinkWrap和value
程式碼示例：
class _CategoryPageState extends State<CategoryPage> {
bool _switchSelected = true; //維護單選開關狀態
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Switch(
value: _switchSelected, //當前狀態，必填
onChanged: (value) { //必填
//重新構建頁面
setState(() {
_switchSelected = value;
});
},
activeColor:Colors.red, //選中後按鈕的顏色，預設是藍色
activeTrackColor:Colors.yellow, //選中後按鈕裡面的顏色
inactiveThumbColor:Colors.pink, //未選中按鈕的顏色
inactiveTrackColor:Colors.green, ////未選中按鈕裡面的顏色
materialTapTargetSize:MaterialTapTargetSize.shrinkWrap, //配置點選目標的最小大小,引數有padded和shrinkWrap
// activeThumbImage 當該開關開啟時在該開關的大拇指上使用的影象。如果這個開關是用[switch .adaptive]建立的，則忽略它。
),
],
),
);
}
}
複製程式碼執行效果：
核取方塊(Checkbox)
和單選框一樣，也需要建立有狀態的模板（用stf快捷鍵建立）
原始碼示例
建構函式如下：
const Checkbox({
Key key,
@required this.value,
this.tristate = false,
@required this.onChanged,
this.activeColor,
this.checkColor,
this.materialTapTargetSize,
})
複製程式碼和單選框一樣value和onChange都是必選的屬性
屬性解釋
有些屬性和單選框一樣，所以就不贅述了，給個例子：
class _CategoryPageState extends State<CategoryPage> {
bool _checkboxSelected = true; //維護核取方塊狀態
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Checkbox(
value: _checkboxSelected,
activeColor: Colors.red, //選中時的顏色
checkColor:Colors.green, //選中時裡面對號的顏色
onChanged: (value) {
setState(() {
_checkboxSelected = value;
});
},
)
],
),
);
}
}
複製程式碼執行效果：
tristate
這個屬性表示是否為三態，其預設值為false ，這時Checkbox有兩種狀態即“選中”和“不選中”，對應的value值為true和false 。如果tristate值為true時，value的值會增加一個狀態null。
總述：
通過Switch和Checkbox可以看到，雖然它們本身是與狀態（是否選中）關聯的，但它們卻不是自己來維護狀態，而是需要父元件來管理狀態。可以在父元件中定義方法，來處理選中與未選中執行的程式碼邏輯