第四十五回：Checkbox Widget

我们在上一章回中介绍了DatePickerDialog Widget相关的内容,本章回中将介绍 Checkbox Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的Checkbox也是叫复选框，没有选中时是一个正方形边框，边框内容是空白的，选中时会在边框中显示一个白色对号，对号周围用深色来填充。它主要用来表示某项内容是否被选中，而且可以同时选中多项内容。

Flutter把复选框封装成了独立的组件，使用Checkbox类来表示该组件，本章回中将详细介绍它的使用的方法。

使用方法

和其它Widget一样，Chexkbox组件也提供了相关的属性来操作自己，下面是一些常用的属性，掌握这些属性的用法后就可以熟练地使用Checkbox组件了：

• checkColor属性：用来控制被选中后对号的颜色，默认是白色；
• activeColor属性：用来控制被选中后对号周围的填充颜色，默认是蓝色;
• shape属性：用来控制没有选中时边框的形状，默认是正方形；
• side属性：用来制没有选中时边框的颜色和粗细，默认是灰色；
• value属性：它是一个布尔类型的值，用来控制复选框是否被选中；
• onChanged属性：它是方法类型，点击复选框时会回此方法，此方法的参数值和value属性值相同；

最后有些注意事项需要单独说明：

• 可以在shape属性中设置边框粗细和颜色，但是没有效果，需要配置side属性才能修改边框粗细和颜色；
• value属性为true时表示复选框被选中，此时会在方框中显示一个对号，反之表示复选框没有被选中，不会显示对号。
• value属性和onChanged属性经常配合使用，在onChanged方法中修改value的属性值，这样来实现点击时选中复选框，再点击时释放被选中的复选框，如果看官们不理解的话，可以看下面的示例代码：

示例代码

child: Checkbox(
  //是否选中的状态
  value: _checkState,
  //对号周围的颜色，默认是蓝色
  activeColor: Colors.deepPurpleAccent,
  //对号的颜色，默认是白色
  checkColor: Colors.amber,
  hoverColor: Colors.greenAccent,
  //shape只能修改形状，边框粗细和颜色没有效果，需要配置side属性才能修改边框粗细颜色
  shape: const CircleBorder(
    side: BorderSide(
      color: Colors.greenAccent,
      width: 3,
    ),
  ),
  side: const BorderSide(
    color: Colors.greenAccent,
    width: 2,
  ),
  //选择时的回调方法，通过修改状态值来切换选中/未选中状态
  onChanged: (value) {
    setState(() {
      if (_checkState) {
        _checkState = false;
      } else {
        _checkState = true;
      }
    });
  },
),

上面的代码只是核心代码，完整的代码可以查看Github中ex022文件中的内容。

编译并且运行上面的程序，会看到一个绿色的圆形边框，表示复选框没有被选中，点击此边框后在边框中出现一个黄色的对号，对号周围用紫色填充，表示复选框被选中。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

看官们，关于Checkbox Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!