繼上一篇Flutter自定義組件的視頻短課（視頻地址： https://www.bilibili.com/video/BV1ap4y1U7UB/ ）后，我們繼續(xù)來(lái)聊自定義組件。視頻中我為大家詳解了Cupertino風(fēng)格的單選框的實(shí)現(xiàn)，這次我們就說(shuō)說(shuō)Cupertino風(fēng)格的復(fù)選框。我們先來(lái)看看效果：

未勾選狀態(tài)

勾選后狀態(tài)

如上兩圖所示，第一張圖是未選中的狀態(tài)，第二張圖是勾選后的狀態(tài)，在點(diǎn)擊時(shí)有點(diǎn)擊效果。為了方便大家看出效果，我特意放大了組件大小。
其實(shí)很簡(jiǎn)單，整個(gè)組件就是Container和Icon組成的。Container是圓角矩形邊框和背景色，icon是中間的對(duì)勾。另外，還有一個(gè)CupertinoButton組件將它們包裹進(jìn)去，實(shí)現(xiàn)點(diǎn)擊事件的響應(yīng)以及點(diǎn)擊效果，以及一個(gè)布爾變量isChecked表示選中狀態(tài)。
我們直接看代碼：

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;
        });
    }
)

怎么樣？很簡(jiǎn)單吧？不過(guò)，這里還有一個(gè)坑。
在實(shí)際應(yīng)用中，不可能吧一個(gè)復(fù)選框設(shè)定到100大小，當(dāng)把它設(shè)置為足夠小的時(shí)候，Button的點(diǎn)擊事件會(huì)在復(fù)選框外還會(huì)響應(yīng)。這是因?yàn)镃upertinoButton中有一個(gè)屬性，叫做minSize。通過(guò)閱讀源碼，我們發(fā)現(xiàn)它有一個(gè)預(yù)設(shè)值：kMinInteractiveDimensionCupertino，值為44.0。
換言之，如果我們的復(fù)選框大小比44小（實(shí)際上大多數(shù)情況皆如此）時(shí)，用戶點(diǎn)擊復(fù)選框外部時(shí)，也會(huì)響應(yīng)。所以，我們還需要給定minSize大小，至少是和icon組件的大小一致，或更小。
好了，本篇文章的內(nèi)容到這里就結(jié)束了，希望能夠幫到你。