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