Flutter 自定义组件实战之Cupertino（iOS）风格的复选框

Posted 2022-12-05 萧文翰

继上一篇Flutter自定义组件的视频短课（视频地址： https://www.bilibili.com/video/BV1ap4y1U7UB/ ）后，我们继续来聊自定义组件。视频中我为大家详解了Cupertino风格的单选框的实现，这次我们就说说Cupertino风格的复选框。我们先来看看效果：


如上两图所示，第一张图是未选中的状态，第二张图是勾选后的状态，在点击时有点击效果。为了方便大家看出效果，我特意放大了组件大小。
其实很简单，整个组件就是Container和Icon组成的。Container是圆角矩形边框和背景色，icon是中间的对勾。另外，还有一个CupertinoButton组件将它们包裹进去，实现点击事件的响应以及点击效果，以及一个布尔变量isChecked表示选中状态。
我们直接看代码：

CupertinoButton(
    child: Container(
        decoration: BoxDecoration(
            color: isChecked
                ? CupertinoColors.systemGreen
                : CupertinoColors.white,
            border: Border.all(
                color: CupertinoColors.systemGrey,
                style: BorderStyle.solid,
                width: 1),
            borderRadius: BorderRadius.all(Radius.circular(5))),
        child: Icon(CupertinoIcons.check_mark,
            size: 100,
            color: isChecked
                ? CupertinoColors.white
                : CupertinoColors.systemGrey),
    ),
    onPressed: () 
        setState(() 
        	isChecked = !isChecked;
        );
    
)

怎么样？很简单吧？不过，这里还有一个坑。
在实际应用中，不可能吧一个复选框设定到100大小，当把它设置为足够小的时候，Button的点击事件会在复选框外还会响应。这是因为CupertinoButton中有一个属性，叫做minSize。通过阅读源码，我们发现它有一个预设值：kMinInteractiveDimensionCupertino，值为44.0。
换言之，如果我们的复选框大小比44小（实际上大多数情况皆如此）时，用户点击复选框外部时，也会响应。所以，我们还需要给定minSize大小，至少是和icon组件的大小一致，或更小。
好了，本篇文章的内容到这里就结束了，希望能够帮到你。