Flutter 基礎組件：單選框和復選框

前言

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

實例

// 單選框和復選框

import 'package:flutter/material.dart';


class SwitchCheckboxRoute extends StatefulWidget {
  @override
  _SwitchCheckboxRouteState createState() => _SwitchCheckboxRouteState();
}

class _SwitchCheckboxRouteState extends State<SwitchCheckboxRoute> {
  // 維護單選狀態
  bool _switchSelected = true;
  // 維護復選狀態
  bool _checkboxSelected = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('單選框 復選框'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            
            // 單選框
            Switch(
              // 當前狀態
              value: _switchSelected,
              onChanged: (value){
                // 重新構建頁面
                setState(() {
                  _switchSelected = value;
                });
              },
            ),

            // 復選框
            Checkbox(
              value: _checkboxSelected,
              onChanged: (value) {
                setState(() {
                  _checkboxSelected = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }

}

總結

Switch和Checkbox屬性比較簡單，它們都有一個activeColor屬性，用於設置激活態的顏色。至於大小，到目前為止，Checkbox的大小是固定的，無法自定義，而Switch只能定義寬度，高度也是固定的。值得一提的是Checkbox有一個屬性tristate ，表示是否為三態，其默認值為false ，這時Checkbox有兩種狀態即“選中”和“不選中”，對應的value值為true和false 。如果tristate值為true時，value的值會增加一個狀態null。
通過Switch和Checkbox我們可以看到，雖然它們本身是與狀態（是否選中）關聯的，但它們卻不是自己來維護狀態，而是需要父組件來管理狀態，然后當用戶點擊時，再通過事件通知給父組件，這樣是合理的，因為Switch和Checkbox是否選中本就和用戶數據關聯，而這些用戶數據也不可能是它們的私有狀態。