前一篇是提到「SwiftUI 中 Button 的 Insets」，和今天的應用有一些關聯，如果你是還沒讀過前一篇的讀者，也推薦你去看。

Shapes

https://developer.apple.com/documentation/swiftui/shapes

在 UIKit 的時候，需要這些形狀時還要依賴 CAShapeLayer 繪製，設定顏色時還需要轉換成 CGColor ，橫跨了不同的 frameworks

現在在 SwiftUI 中，Apple 幫我們把這一類的形狀元件全部都放在 SwiftUI ，直接使用即可，甚至可以直接拿來當背景、遮罩等。

這篇就來介紹幾個我自己常用的形狀

Rectangle, RoundedRectangle

• https://developer.apple.com/documentation/swiftui/rectangle
• https://developer.apple.com/documentation/swiftui/roundedrectangle

如字面，一個是「矩形」，另一個則是能設定圓角的矩形。

Rectangle()
    .frame(width: 100, height: 100)
    .foregroundColor(.blue)

RoundedRectangle(cornerRadius: 25)
    .frame(width: 100, height: 100)
    .foregroundColor(.blue)

顏色

要設定這些形狀的顏色時，如程式碼所示，必須設定在 foregroundColor ，而不是 background 。

效果圖

Rectangle	RoundedRectangle

Circle

https://developer.apple.com/documentation/swiftui/circle

Circle()
    .frame(width: 100, height: 100)
    .foregroundColor(.blue)

效果

和 UIKit 的差異

有寫過 UIKit 的朋友應該就知道，如果要做出圓形背景的效果，就要在 layoutSubview 之類的寫像是這樣的東西：

someView.layer.cornerRadius = someView.height / 2
someView.layer.masksToBounds = true

在 SwiftUI 的話，只要在元件下面疊加一個 Circle 即可，看到有這個東西的時候自己真的是感動不已！

Capsule

• https://developer.apple.com/documentation/swiftui/capsule

Capsule()
    .frame(width: 100, height: 50)
    .foregroundColor(.blue)

這個是近年來開始比較常見，像是網頁或 app 裡的按鈕會做成膠囊的形狀。有時候也會聽到設計師們叫這個風格 "pills" 。

在 UIKit 時和圓形一樣有較為繁複得設定方式，而在 SwiftUI 中，只要疊加 Capsule 就可以解決，對我自己來說不誇張也是一個救贖。

應用

Button {} label: {
    Text("鐵人發文")
        .padding(.horizontal, 32)
        .padding(.vertical, 8)
}
.tint(.white)
.background(
    Capsule()
        .foregroundColor(.indigo)
)

應用 前一篇 (Day 2) 提到的 Button 的樣式設定，像是這樣子，就可以幫一個按鈕加上一個 Capsule 作為背景。

結語

Apple 在 SwiftUI 加上這些 UI 元件，對我們平常要新增 custom UI 真的幫上很大的忙，知道這些之後不妨也在專案上實際用用看吧！

今天的 SwiftUI 的大大小小就到這邊，
以上，明天見！

環境

• Xcode 15 beta 8

本篇使用到的 UI 元件和 modifiers 基本上沒有受到版本更新影響，除了 iOS 17 以後才出現的 API ，在 Xcode 14 等環境下使用也是沒有問題的。