初略講解Flutter的Switch和Checkbox（基礎組件）

單選開關和複選框

Material Widgets庫中提供了Material風格的單選開關Switch和複選框Checkbox，它們都是繼承自StatefulWidget，但它們的選擇狀態屬於用戶數據，因此最好由父Widget來管理其選擇狀態。當用戶點擊Switch或Checkbox時，它們會觸發onChanged回調，咱們能夠在此回調中處理選擇狀態改變邏輯。

示例代碼：

// SwitchAndCheckboxApp
class SwitchAndCheckboxApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "單選開關和複選框",
      home: Scaffold(
        appBar: AppBar(
          title: Text("單選開關和複選框"),
        ),
        body: new SwitchAndCheckBoxTestRoute(),
      )
    );
  }
}

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

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

上面代碼中，因爲要維護Switch和Checkbox的選擇狀態，因此SwitchAndCheckBoxTestRoute繼承自StatefulWidget，並在其_SwitchAndCheckBoxTestRouteState類中的build方法中分別構建了一個Switch和一個Checkbox，初始化狀態都爲選中狀態，當用戶點擊時，會將狀態置反，而後回調setState()通知framework從新構建UI。

運行效果：

屬性

Switch和Checkbox屬性比較簡單，它們都有一個activeColor屬性，用於設置選中狀態的顏色，至於大小，到目前爲止，Checkbox的大小是固定的，沒法自定義，而Switch只能定義寬度，高度也是固定的。值得一提的是，Checkbox有一個屬性tristate，表示是否爲三態，其默認值爲false，這時Checkbox只有兩種狀態，即「選中」和「未選中」，對應的value值爲true和false；若是設置tristate的值爲true，那麼Checkbox將會有三種狀態，且value的值會增長一個狀態null，詳細狀況讀者可自行了解。

總結

經過Switch和Checkbox咱們能夠看到，雖然它們自己是與狀態（是否選中）相關聯的，但它們卻不是本身來維護狀態，而是經過父Widget來管理狀態，而後當用戶點擊時，再經過事件將選擇狀態通知給父Widget，這樣是合理的，由於Switch和Checkbox是否選中本就和用戶數據相關聯，而這些用戶數據也不多是它們的私有狀態，因此咱們在自定義Widget時也要思考一下哪一種狀態的管理方式最爲合理。