基礎元件：單選開關和核取方塊

fengMisaka發表於2024-08-23
元件

一、簡介

Material 元件庫中提供了 Material 風格的單選開關Switch和核取方塊Checkbox，雖然它們都是繼承自StatefulWidget，但它們本身不會儲存當前選中狀態，選中狀態都是由父元件來管理的。當Switch或Checkbox被點選時，會觸發它們的onChanged回撥，我們可以在此回撥中處理選中狀態改變邏輯。下面看一個簡單的例子：

class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  @override
  _SwitchAndCheckBoxTestRouteState createState() => _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:(value){
            //重新構建頁面  
            setState(() {
              _switchSelected=value;
            });
          },
        ),
        Checkbox(
          value: _checkboxSelected,
          activeColor: Colors.red, //選中時的顏色
          onChanged:(value){
            setState(() {
              _checkboxSelected=value;
            });
          } ,
        )
      ],
    );
  }
}

上面程式碼中，由於需要維護Switch和Checkbox的選中狀態，所以SwitchAndCheckBoxTestRoute繼承自StatefulWidget 。在其build方法中分別構建了一個Switch和Checkbox，初始狀態都為選中狀態，當使用者點選時，會將狀態置反，然後回撥用setState()通知 Flutter 框架重新構建UI，效果如圖3-17所示：

Flutter_checkBox_A.png


二、屬性及外觀

Switch和Checkbox屬性比較簡單，讀者可以檢視API文件，它們都有一個activeColor屬性，用於設定啟用態的顏色。至於大小，到目前為止，Checkbox的大小是固定的，無法自定義，而Switch只能定義寬度，高度也是固定的。值得一提的是Checkbox有一個屬性tristate ，表示是否為三態，其預設值為false ，這時 Checkbox 有兩種狀態即“選中”和“不選中”，對應的 value 值為true和false ；如果tristate值為true時，value 的值會增加一個狀態null，讀者可以自行測試。

三、注意

透過Switch和Checkbox我們可以看到，雖然它們本身是與狀態（是否選中）關聯的，但它們卻不是自己來維護狀態，而是需要父元件來管理狀態，然後當使用者點選時，再透過事件通知給父元件，這樣是合理的，因為Switch和Checkbox是否選中本就和使用者資料關聯，而這些使用者資料也不可能是它們的私有狀態。我們在自定義元件時也應該思考一下哪種狀態的管理方式最為合理。


透過Switch和Checkbox我們可以看到，雖然它們本身是與狀態（是否選中）關聯的，但它們卻不是自己來維護狀態，而是需要父元件來管理狀態，然後當使用者點選時，再透過事件通知給父元件，這樣是合理的，因為Switch和Checkbox是否選中本就和使用者資料關聯，而這些使用者資料也不可能是它們的私有狀態。我們在自定義元件時也應該思考一下哪種狀態的管理方式最為合理。

相關文章