Flutter 自定義元件實戰之Cupertino（iOS）風格的核取方塊

蕭文翰發表於2020-07-05
Flutter元件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元件的大小一致，或更小。
好了，本篇文章的內容到這裡就結束了，希望能夠幫到你。

相關文章