第 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 修飾器將其轉換為按鈕。以下是一個程式碼示例：

Button(action: {

}) {
    Text("Register")
        .font(.title)
}
.tint(.white)
.frame(width: 300, height: 100)
.background {
    UnevenRoundedRectangle(cornerRadii: .init(
                                                        topLeading: 50.0, 
                                                        bottomLeading: 10.0, 
                                                        bottomTrailing: 50.0, 
                                                        topTrailing: 30.0), 
                                                        style: .continuous)
        .foregroundStyle(.indigo)
}

圓角的動畫效果

要為 UnevenRoundedRectangle 的圓角添加動畫效果，你可以使用 withAnimation 函數並切換一個布林變數。以下是一個程式碼示例：

struct AnimatedCornerView: View {

    @State private var animate = false

    var body: some View {

        UnevenRoundedRectangle(cornerRadii: .init(
                                    topLeading: animate ? 10.0 : 80.0,
                                    bottomLeading: animate ? 80.0 : 10.0,
                                    bottomTrailing: animate ? 80.0 : 10.0,
                                    topTrailing: animate ? 10.0 : 80.0))
            .foregroundStyle(.indigo)
            .frame(height: 200)
            .padding()
            .onTapGesture {
                withAnimation {
                    animate.toggle()
                }
            }

    }
}

在這個例子中，點擊矩形將切換 animate 變數，該變數控制矩形的圓角半徑。withAnimation 函數將動畫地過渡兩組圓角半徑之間的變化。

創建獨特的形狀

通過重疊多個 UnevenRoundedRectangle 視圖，你可以創建各種各樣的形狀。上面提供的示例演示了如何使用以下程式碼創建所示的特定形狀：

ZStack {
    ForEach(0..<18, id: \.self) { index in
        UnevenRoundedRectangle(cornerRadii: .init(topLeading: 20.0, bottomLeading: 5.0, bottomTrailing: 20.0, topTrailing: 10.0), style: .continuous)
            .foregroundStyle(.indigo)
            .frame(width: 300, height: 30)
            .rotationEffect(.degrees(Double(10 * index)))
    }
}
.overlay {
    Image(systemName: "briefcase")
        .foregroundStyle(.white)
        .font(.system(size: 100))
}

若要添加額外的視覺效果，你可以通過修改程式碼來動畫化不透明度的變化，如下所示：

ZStack {
    ForEach(0..<18, id: \.self) { index in
        UnevenRoundedRectangle(cornerRadii: .init(topLeading: 20.0, bottomLeading: 5.0, bottomTrailing: 20.0, topTrailing: 10.0), style: .continuous)
            .foregroundStyle(.indigo)
            .frame(width: 300, height: 30)
            .opacity(animate ? 0.6 : 1.0)
            .rotationEffect(.degrees(Double(10 * index)))
            .animation(.easeInOut.delay(Double(index) * 0.02), value: animate)
    }
}
.overlay {
    Image(systemName: "briefcase")
        .foregroundStyle(.white)
        .font(.system(size: 100))
}
.onTapGesture {
    animate.toggle()
}

修改後，程式將產生一個視覺上迷人的效果，為你的設計增添了額外的吸引力。

總結

在SwiftUI中添加UnevenRoundedRectangle視圖為開發人員提供了一個方便的解決方案，用於對矩形視圖的特定角落進行圓角處理。它還提供了靈活性和選項，以實現你想要的App UI。使用UnevenRoundedRectangle形狀，你可以無縫地將獨特且吸引人的形狀融入到你的應用程序中，增強其整體設計和用戶體驗。

你可以在這裡下載示範項目：

• 示範項目(https://www.appcoda.com/resources/swiftui5/SwiftUIUnevenRoundedRect.zip)