Flutter入門筆記系列文章部分內容來源于《Flutter 實戰(zhàn)》，如有侵權請聯(lián)系刪除！

Material 組件庫中提供了Material風格的單選開關Switch和復選框Checkbox，雖然它們都是繼承自StatefulWidget，但它們本身不會保存當前選中狀態(tài)，選中狀態(tài)都是由父組件來管理的。當Switch或Checkbox被點擊時，會觸發(fā)它們的onChanged回調，我們可以在此回調中處理選中狀態(tài)改變邏輯。

首先看一個簡單的例子：

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;
      });
    })

運行效果：

CheckBox關 Switch開

CheckBox開 Switch關

Switch和Checkbox初始狀態(tài)都為未選中狀態(tài)，當用戶點擊時，會將狀態(tài)置反，然后回調用setState()通知Flutter framework重新構建UI。

屬性介紹

下面以Switch控件為例：

const Switch({
  Key key,
  @required this.value,    //true：開， false：關
  @required this.onChanged,   //狀態(tài)變化時的回調方法
  this.activeColor,   //打開狀態(tài)下顏色
  this.activeTrackColor,   //打開狀態(tài)下track顏色
  this.inactiveThumbColor,   //關閉狀態(tài)thumb顏色
  this.inactiveTrackColor,   //關閉狀態(tài)track顏色
  this.activeThumbImage,   //打開狀態(tài)下thumb圖片
  this.inactiveThumbImage,   //關閉狀態(tài)下thumb圖片
  this.materialTapTargetSize,   //點擊區(qū)域
}) 

注：track表示的是開關劃過的路徑，thumb表示的是小圓圈。

簡單測試一下這些屬性的作用：

Switch(
    value: switchState,
    activeColor: Colors.green,
    inactiveThumbColor: Colors.blue,
    activeTrackColor: Colors.red,
    inactiveTrackColor: Colors.grey,
    onChanged: (value) {
      setState(() {
        switchState = value;
      });
    })

運行效果

Switch關閉

Switch打開

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;
      });
    })

運行效果

Switch關閉

Switch打開

Switch和Checkbox屬性比較簡單，讀者可以查看API文檔，它們都有一個activeColor屬性，用于設置激活態(tài)的顏色。至于大小，到目前為止，Checkbox的大小是固定的，無法自定義，而Switch只能定義寬度，高度也是固定的。值得一提的是Checkbox有一個屬性tristate ，表示是否為三態(tài)，其默認值為false ，這時Checkbox有兩種狀態(tài)即“選中”和“不選中”，對應的value值為true和false 。如果tristate值為true時，value的值會增加一個狀態(tài)null，讀者可以自行了解。

通過Switch和Checkbox我們可以看到，雖然它們本身是與狀態(tài)（是否選中）關聯(lián)的，但它們卻不是自己來維護狀態(tài)，而是需要父組件來管理狀態(tài)，然后當用戶點擊時，再通過事件通知給父組件，這樣是合理的，因為Switch和Checkbox是否選中本就和用戶數(shù)據(jù)關聯(lián)，而這些用戶數(shù)據(jù)也不可能是它們的私有狀態(tài)。我們在自定義組件時也應該思考一下哪種狀態(tài)的管理方式最為合理。