本章說一下 單選框(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可以看到，雖然它們本身是與狀態（是否選中）關聯的，但它們卻不是自己來維護狀態，而是需要父元件來管理狀態。可以在父元件中定義方法，來處理選中與未選中執行的程式碼邏輯

---

G_G