第 51 章
使用 UnevenRoundedRectangle 來圓角特定的角落

在SwiftUI中，有一個方便的內建修飾器稱為cornerRadius，它讓你輕鬆地為視圖創建圓角。通過將cornerRadius修飾器應用於Rectangle視圖，你可以將其轉換為圓角矩形。你提供給修飾器的值決定了圓角效果的程度。

Rectangle()
    .cornerRadius(10.0)

另外，SwiftUI 也提供了一個標準的 RoundedRectangle 視圖用於創建圓角矩形：

RoundedRectangle(cornerRadius: 25.0)

可惜，無論是 cornerRadius 修飾器還是 RoundedRectangle 視圖，都只能將相同的圓角半徑應用於形狀的所有角落。

那麼，如果你需要對視圖的特定角進行圓角處理呢？

在 iOS 17 中，SwiftUI 框架引入了一個新的視圖，稱為 UnevenRoundedRectangle。這個視圖的獨特之處在於能夠為每個角指定不同的半徑值，讓開發人員可以創建高度可自定義的形狀。

使用 UnevenRoundedRectangle

有了 UnevenRoundedRectangle，你可以輕鬆地創建具有不同半徑圓角的矩形形狀。要使用 UnevenRoundedRectangle，你只需為每個角指定圓角半徑。以下是一個示例：

UnevenRoundedRectangle(cornerRadii: .init(
                                                    topLeading: 50.0, 
                                                    bottomLeading: 10.0, 
                                                    bottomTrailing: 50.0, 
                                                    topTrailing: 30.0), 
                                                    style: .continuous)
    .frame(width: 300, height: 100)
    .foregroundStyle(.indigo)

你還可以選擇指定角落的樣式。使用 continuous 角落樣式可以使角落看起來更加平滑。如果你將上面的程式碼放在 Xcode 15 中，你可以像下面這樣創建一個矩形形狀。

你可以使用這個形狀，並通過使用 background 修飾器將其轉換為按鈕。以下是一個程式碼示例：

想更深入學習SwiftUI和下載完整程式碼？你可以從 AppCoda網站購買《精通 SwiftUI》完整電子版。