flutter-widget-CheckBox

CheckBox與radio差很少，其中屬性主要有如下幾種： activeColor：選中時默認除了對號之外區域的填充色 tristate: 爲true時表明CheckBox的值能夠爲null，默認爲false，即value只能爲true或者爲false checkColor: 選中時默認對號的填充色 value: 值爲true、false或者null（tristate爲true） onChanged: 狀態改變時的回調，複選框自己不保持任何狀態，若是要保存狀態的話須要以下

class CheckboxDefault extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => _CheckboxDefault();
}

class _CheckboxDefault extends State {
  bool isChecked = false;
  bool isSecondChecked = false;

  Color color = _randomColor(); // 注意和下面的 StatelessWidget 裏的 _randomColor 區別
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Checkbox(
                activeColor: _randomColor(),
                tristate: false,
                value: isChecked,
                onChanged: (bool bol) {
                  /// It is an error to call [setState] unless [mounted] is true.
                  if (mounted) {
                    setState(() {
                      isChecked = bol;
                    });
                  }
                }),
            Checkbox(
                activeColor: _randomColor(),
                tristate: false,
                value: isSecondChecked,
                onChanged: (bool bol) {
                  /// It is an error to call [setState] unless [mounted] is true.
                  if (this.mounted) {
                    setState(() {
                      isSecondChecked = bol;
                    });
                  }
                })
          ],
        ),
      ),
    );
  }
}

Color _randomColor() {
  var red = Random.secure().nextInt(255);
  var greed = Random.secure().nextInt(255);
  var blue = Random.secure().nextInt(255);
  return Color.fromARGB(255, red, greed, blue);
}
複製代碼

其實主要的就是在onChanged方法中setState而且把當前狀態保存在父element中，也就是這個的isChecked和isSecondChecked。 若是要實現相似於radioGroup的效果以下就可

class CheckboxSelect extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _CheckboxSelect();
}

class _CheckboxSelect extends State {
  int selectValue = -1;
  int firstIndex = 0;
  int secondIndex = 1;
  Color color = _randomColor(); // 注意和下面的 StatelessWidget 裏的 _randomColor 區別
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: Center(
            child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Checkbox(
            activeColor: _randomColor(),
            tristate: false,
            checkColor: Color.fromARGB(255, 255, 0, 0),
            value: selectValue == firstIndex,
            onChanged: (bool bol) {
              /// It is an error to call [setState] unless [mounted] is true.
              if (this.mounted) {
                setState(() {
                  selectValue = bol ? firstIndex : -1;
                });
              }
            }),
        Checkbox(
            activeColor: _randomColor(),
            tristate: false,
            value: selectValue == secondIndex,
            onChanged: (bool bol) {
              /// It is an error to call [setState] unless [mounted] is true.
              if (this.mounted) {
                setState(() {
                  selectValue = bol ? secondIndex : -1;
                });
              }
            })
      ],
    )));
  }
}

Color _randomColor() {
  var red = Random.secure().nextInt(255);
  var greed = Random.secure().nextInt(255);
  var blue = Random.secure().nextInt(255);
  return Color.fromARGB(255, red, greed, blue);
}
複製代碼

還有一種是帶文字的CheckBox相似於RadioListTitle。與CheckBox相比多瞭如下屬性 title：標題 subtitle：副標題 isThreeLine ：標題是否爲三行 dense, secondary：與CheckBox相反方向的圖標 selected ：是否選中 controlAffinity：文本與圖標的方向（ListTileControlAffinity.leading：複選框在前文字在後，ListTileControlAffinity.trailing與前一個相反）

實現上圖的代碼爲

class CheckboxListTileStateDefault extends StatefulWidget {
  const CheckboxListTileStateDefault() : super();

  @override
  State<StatefulWidget> createState() => _CheckboxListTileStateDefault();
}

// CheckboxListTile 默認的實例,有狀態
class _CheckboxListTileStateDefault extends State {
  bool _value = false;

  void _valueChanged(bool value) {
    for (var i = 0; i < isChecks.length; i++) {
      isChecks[i] = value;
    }
    if (mounted) {
      setState(() => _value = value);
    }
  }

  bool isCheck = false;
  List<bool> isChecks = [false, false, false, false];

  @override
  Widget build(BuildContext context) {
    return new Padding(
      padding: EdgeInsets.all(20),
      child: Scaffold(
          body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Center(
            child: CheckboxListTile(
              value: _value,
              selected: true,
              // 默認文字是否高亮
              onChanged: _valueChanged,
              dense: false,
              // 文字是否對齊 圖標高度
              isThreeLine: false,
              // 文字是否三行顯示
              title: Text('所有'),
              // 主標題
              controlAffinity: ListTileControlAffinity.trailing,
              // 將控件放在何處相對於文本,leading 按鈕顯示在文字後面,platform,trailing 按鈕顯示在文字前面
              subtitle: Text('勾選下列所有結果'),
              // 標題下方顯示的副標題
              secondary: Icon(Icons.archive),
              // 從複選框顯示在磁貼另外一側的小組件
              activeColor: Colors.red, // 選中此複選框時要使用的顏色
            ),
          ),
          Center(
            child: CheckboxListTile(
                value: isChecks[0],
                title: Text('選項1'),
                activeColor: _value ? Colors.red : Colors.green,
                controlAffinity: ListTileControlAffinity.platform,
                onChanged: (bool) {
                  if (mounted) {
                    setState(() {
                      isChecks[0] = bool;
                    });
                  }
                }),
          ),
          Center(
            child: CheckboxListTile(
                value: isChecks[1],
                title: Text('選項2'),
                activeColor: _value ? Colors.red : Colors.green,
                controlAffinity: ListTileControlAffinity.leading,
                onChanged: (bool) {
                  setState(() {
                    isChecks[1] = bool;
                  });
                }),
          ),
          Center(
            child: CheckboxListTile(
                value: isChecks[2],
                title: Text('選項3'),
                activeColor: _value ? Colors.red : Colors.green,
                controlAffinity: ListTileControlAffinity.platform,
                onChanged: (bool) {
                  setState(() {
                    isChecks[2] = bool;
                  });
                }),
          ),
          Center(
            child: CheckboxListTile(
                value: isChecks[3],
                title: Text('選項4'),
                activeColor: _value ? Colors.red : Colors.green,
                controlAffinity: ListTileControlAffinity.platform,
                onChanged: (bool) {
                  setState(() {
                    isChecks[3] = bool;
                  });
                }),
          )
        ],
      )),
    );
  }
}
複製代碼

全選的實現：爲每個CheckBox定義一個value值，當選擇全選時更改全部CheckBox的value，同時調用setState更新狀態，若是不設置onChanged則該CheckBox不可點擊， 若是想要作成知足某一條件才能夠點擊的話須要以下設置（以上面的選項4爲例）

Center(
  child: CheckboxListTile(
      value: isChecks[3],
      title: Text('選項4'),
      activeColor: _value ? Colors.red : Colors.green,
      controlAffinity: ListTileControlAffinity.platform,
      onChanged: _value
          ? (bool bol) {
              //
            }
          : null),
)
複製代碼

也就是_value爲true時才設置onChanged方法不然設置爲null