Flutter 自定義組件實戰之Cupertino（iOS）風格的複選框

繼上一篇Flutter自定義組件的視頻短課（視頻地址： www.bilibili.com/video/BV1ap… ）後，咱們繼續來聊自定義組件。視頻中我爲你們詳解了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組件的大小一致，或更小。
好了，本篇文章的內容到這裏就結束了，但願可以幫到你。