Flutter實(shí)戰(zhàn) 單選開關(guān)和復(fù)選框

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

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


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

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

#屬性及外觀

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

#總結(jié)

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