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 站 。
附录: 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 圆角的矩形边框。 |