Flutter 组件集录 | CupertinoCheckbox 复选框Flutter 中的 Checkbox 属于 M

Flutter 中的 Checkbox 属于 Material 风格，这对于桌面端很不友好。为此 Flutter 中增加了 CupertinoCheckbox 组件，它是一个 macOS 方格的复选框。本文来了解一下它的使用，以及简单该组件的源码实现。

Checkbox	CupertinoCheckbox

该组件已经收录到了 FlutterUnit 中，大家可以在源码中查看，后续会在新版本中发布。

1. CupertinoCheckbox 的使用

在使用方面，它和 Checkbox 基本一致，都是：

需要提供 value 值决定是否激活；
在 onChanged 中感知选中变化的事件，回调新的激活值；
通过回调值更新当前激活状态，触发重新构建，更新界面展示。

class CupertinoCheckboxDemo1 extends StatefulWidget {
  const CupertinoCheckboxDemo1({super.key});

  @override
  State<CupertinoCheckboxDemo1> createState() => _CupertinoCheckboxDemo1State();
}

class _CupertinoCheckboxDemo1State extends State<CupertinoCheckboxDemo1> {
  bool? _active = false;

  @override
  Widget build(BuildContext context) {
    return CupertinoCheckbox(
          value: _active,
          onChanged: (bool? value) {
            setState(() {
              _active = value;
            });
          },
        );
  }
}

构造的必填项和相关颜色配置，整理在如下表中：

属性名称	类型	默认值	描述
`value`	`bool?`	必填，无默认值	表示复选框是否被选中。当 [tristate] 为 `true` 时，可以为 `null`，表示混合状态；否则，必须不为 `null`。
`onChanged`	`ValueChanged<bool?>?`	必填，无默认值	值发生更改时调用的回调函数。如果为 `null`，复选框将显示为禁用状态且无法响应用户操作。
`activeColor`	`Color?`	`CupertinoColors.activeBlue`	复选框选中时使用的颜色。
`inactiveColor`	`Color?`	`CupertinoColors.inactiveGray`	复选框未选中时使用的颜色。
`checkColor`	`Color?`	`CupertinoColors.white`	复选框选中时用于勾选图标的颜色。

2. CupertinoCheckbox 的三态

对于一些全选操作，在全选和未选择之前，就是第三种状态，如下所示：

三态由 tristate 属性设置，如果为 true，复选框的 value 可以为 true、false 或 null；而 null 对应的 value 就是第三态， onChanged 的回调中也会返回 null 。
注: 全选相关需求中，当选中项数量未满时，将 value 置为 null 即可。

CupertinoCheckbox(
  value: _active,
  tristate: true,
  onChanged: (bool? value) {
    setState(() {
      _active = value;
    });
  },
);

3. 边线和形状

边线属性 side 传入 BorderSide 对象，控制边线颜色，默认是 1 像素黑色边线；
形状属性传入 OutlinedBorder 对象，控制形状，默认是圆弧 4 的圆角矩形。可以通过 StadiumBorder 形状让它变成圆形(下面第三个)

class CupertinoCheckboxDemo3 extends StatefulWidget {
  const CupertinoCheckboxDemo3({super.key});

  @override
  State<CupertinoCheckboxDemo3> createState() => _CupertinoCheckboxDemo3State();
}

class _CupertinoCheckboxDemo3State extends State<CupertinoCheckboxDemo3> {
  bool? _active = false;

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        CupertinoCheckbox(
          value: _active,
          onChanged: (bool? value) {
            setState(() {
              _active = value;
            });
          },
        ),
        CupertinoCheckbox(
          shape:  RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
          side: const BorderSide(color: Colors.black12),
          value: _active,
          onChanged: (bool? value) {
            setState(() {
              _active = value;
            });
          },
        ),
        CupertinoCheckbox(
          shape: const StadiumBorder(),
          side: const BorderSide(color: Colors.black12),
          value: _active,
          onChanged: (bool? value) {
            setState(() {
              _active = value;
            });
          },
        ),
      ],
    );
  }
}

4. CupertinoCheckbox 源码简看

总得来说 CupertinoCheckbox 用法还是非常简单的，下面来瞄一眼它的源码实现。它是一个 StatefulWidget ，首先要想它维护状态的必要性：

该组件依赖 _CupertinoCheckboxState 实现状态维护和视图构建的任务。状态类中混入了 TickerProviderStateMixin 说明需要进行动画处理。另外维护了 _CheckboxPainter 成员变量，用于绘制：

在 dispose 回调中会销毁画板，所以画板对象应该是个可监听对象。

  @override
  void dispose() {
    _painter.dispose();
    super.dispose();
  }

通过类继承关系可以看出，它确实是一个 ChangeNotifier 可监听对象

另外，ToggleablePainter 实现了 CustomPainter ,说明 _CheckboxPainter 是一个自定义画板，必然有其绘制的逻辑。

在 _CheckboxPainter#paint 方法中放置界面展示的绘制逻辑，包括边框和对钩。这个绘制相对比较简单，对绘制感兴趣的朋友可以自己看看，这里就不展开了。

最后组件构建流程，点击事件通过 GestureDetector 监听；展示绘制使用 CustomPaint 组件：

这就是 CupertinoCheckbox 组件的使用和源码简看，那本文就到这里，谢谢观看。后续 FlutterUnit 还会收录更多的组件，欢迎持续关注，我们下次再见 ~

更多文章和视频知识资讯，大家可以关注我的公众号、掘金和 B 站。

掘金账号：张风捷特烈
bilibli 账号：张风捷特烈
公众号：编程之王

附录: CupertinoCheckbox 属性一览

属性名称	类型	默认值	描述
`value`	`bool?`	必填，无默认值	表示复选框是否被选中。当 [tristate] 为 `true` 时，可以为 `null`，表示混合状态；否则，必须不为 `null`。
`onChanged`	`ValueChanged<bool?>?`	必填，无默认值	值发生更改时调用的回调函数。如果为 `null`，复选框将显示为禁用状态且无法响应用户操作。
`activeColor`	`Color?`	`CupertinoColors.activeBlue`	复选框选中时使用的颜色。
`inactiveColor`	`Color?`	`CupertinoColors.inactiveGray`	复选框未选中时使用的颜色。
`checkColor`	`Color?`	`CupertinoColors.white`	复选框选中时用于勾选图标的颜色。
`tristate`	`bool`	`false`	如果为 `true`，复选框的 `value` 可以为 `true`、`false` 或 `null`；为 `false` 时，`value` 必须为非空值，并在 `true` 和 `false` 间切换。
`focusColor`	`Color?`	活动颜色的较浅版本	复选框获得焦点时边框的阴影颜色。
`focusNode`	`FocusNode?`	无	管理复选框焦点状态的节点。
`autofocus`	`bool`	`false`	是否在构建时自动聚焦复选框。
`side`	`BorderSide?`	黑色实线，宽度为 1 像素	复选框边框的颜色和宽度。
`shape`	`OutlinedBorder?`	`RoundedRectangleBorder`	复选框的形状。默认为带有 4.0 圆角的矩形边框。