跟隨《Flutter實(shí)戰(zhàn)·第二版》學(xué)習(xí)，建議直接看原書

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

下面看一個(gè)簡(jiǎn)單的例子：

void main() {
  runApp(MaterialApp(
    home: SwitchAndCheckBox(),
  ));
}

class SwitchAndCheckBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("SwitchAndCheckBoxTest"),
      ),
      body: SwitchAndCheckBoxTestRoute(),
    );
  }
}

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


class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
  bool _switchSelected = true; // 維護(hù)單選開關(guān)狀態(tài)
  bool _checkboxSelected = true; // 維護(hù)復(fù)選開關(guān)狀態(tài)

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Switch(
          value: _switchSelected, //當(dāng)前狀態(tài)
          onChanged: (value) {
            //重新構(gòu)建頁(yè)面
            setState(() {
              _switchSelected = value;
            });
          },
        ),
        Checkbox(
          value: _checkboxSelected,
          activeColor: Colors.red, // 選中時(shí)的顏色
          onChanged: (value) {
            setState(() {
              _checkboxSelected = value!;
              // _checkboxSelected = value;
            });
          },
        )
      ],
    );
  }
}

image.png

image.png

上面代碼中，由于需要維護(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 框架重新構(gòu)建UI。

屬性及外觀

Switch和Checkbox屬性比較簡(jiǎn)單，讀者可以查看API文檔，它們都有一個(gè)activeColor屬性，用于設(shè)置激活態(tài)的顏色。至于大小，到目前為止，Checkbox的大小是固定的，無(wú)法自定義，而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，讀者可以自行測(cè)試

注意

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