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

继上一篇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组件的大小一致,或更小。
好了,本篇文章的内容到这里就结束了,希望能够帮到你。

posted @ 2020-07-05 14:01  萧文翰  阅读(314)  评论(0编辑  收藏  举报