簡(jiǎn)介

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

運(yùn)行效果

這兩個(gè)widgets比較簡(jiǎn)單，故寫(xiě)在一起，效果與打印如下：

運(yùn)行效果.gif

children: <Widget>[
            Switch(
// 滑動(dòng)開(kāi)關(guān)時(shí)光圈顏色
                activeColor: Colors.red,

// 開(kāi)關(guān)開(kāi)和關(guān)的軌道背景色
                activeTrackColor: Colors.orange,
                inactiveTrackColor: Colors.green,
// 開(kāi)關(guān)頭背景色，若同時(shí)有圖片，則圖片優(yōu)先
                inactiveThumbColor: Colors.yellow,
// 開(kāi)關(guān)頭上的開(kāi)或者關(guān)的圖片
                activeThumbImage: AssetImage('images/1.png'),
                inactiveThumbImage: AssetImage('images/2.png'),

                //設(shè)置為MaterialTapTargetSize.shrinkWrap時(shí)，clip距頂部距離為0；
                // 設(shè)置為MaterialTapTargetSize.padded時(shí)距頂部有一個(gè)距離
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                value: _switchSelected,
                onChanged: (value) {
                  _handleSwitch(value);
                }),
            Checkbox(
                // 屬性tristate，表示是否為三態(tài)，其默認(rèn)值為false
                // 這時(shí)Checkbox有兩種狀態(tài)即“選中”和“不選中”，對(duì)應(yīng)的value值為true和false ；
                // 如果其值為true時(shí)，value的值會(huì)增加一個(gè)狀態(tài)null。
                tristate: true,
                activeColor: Colors.red,
                value: _checkBoxSelected,
                onChanged: (value) {
                  _handleCheckBox(value);
                })
          ]

點(diǎn)擊方法回調(diào)

_handleCheckBox(value) {
    setState(() {
      print(value);
      _checkBoxSelected = value;
    });
  }

Checkbox 注意點(diǎn)

checkbox有一個(gè)屬性tristate ，表示是否為三態(tài)，其默認(rèn)值為false ，這時(shí)Checkbox有兩種狀態(tài)即“選中”和“不選中”，對(duì)應(yīng)的value值為true和false ；如果其值為true時(shí)，value的值會(huì)增加一個(gè)狀態(tài)null，上述動(dòng)圖的打印結(jié)果就是驗(yàn)證。