Flutter實戰(zhàn) 單選開關和復選框

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

class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  @override
  _SwitchAndCheckBoxTestRouteState createState() => new _SwitchAndCheckBoxTestRouteState();
}


class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
  bool _switchSelected=true; //維護單選開關狀態(tài)
  bool _checkboxSelected=true;//維護復選框狀態(tài)
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Switch(
          value: _switchSelected,//當前狀態(tài)
          onChanged:(value){
            //重新構建頁面  
            setState(() {
              _switchSelected=value;
            });
          },
        ),
        Checkbox(
          value: _checkboxSelected,
          activeColor: Colors.red, //選中時的顏色
          onChanged:(value){
            setState(() {
              _checkboxSelected=value;
            });
          } ,
        )
      ],
    );
  }
}

上面代碼中，由于需要維護Switch和Checkbox的選中狀態(tài)，所以SwitchAndCheckBoxTestRoute繼承自StatefulWidget 。在其build方法中分別構建了一個Switch和Checkbox，初始狀態(tài)都為選中狀態(tài)，當用戶點擊時，會將狀態(tài)置反，然后回調(diào)用setState()通知 Flutter framework 重新構建 UI。

#屬性及外觀

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)的管理方式最為合理。