如何在 SwiftUI 中的视图之间转换圆角半径？

Question

我有一个类似于应用程序图标的小圆角正方形。当我单击正方形时，它应该平滑地过渡到全屏矩形，没有圆角。

以下代码将角从圆角变为尖角并返回。

struct ContentView: View {
    @State private var cornerRadius: Double = 60.0
 
    var body: some View {
        ZStack {
            Rectangle()
                .foregroundStyle(.orange)
                .frame(width: 300, height: 300)
                .clipShape(RoundedRectangle(cornerRadius: cornerRadius))
                
        }
        .animation(.linear, value: cornerRadius)
        .onTapGesture {
            if cornerRadius > 0 {
                cornerRadius = 0.0
            } else {
                cornerRadius = 60.0
            }
        }
        .preferredColorScheme(.dark)
    }
}

但是，当我使用不同的视图时，以下代码会将其顺利地从小正方形过渡到全屏矩形并返回。但是一旦我添加clipShape来过渡圆角半径，它就会中断。

struct ContentView: View {
    @Namespace private var namespace
    @State private var goFullScreen = false
 
    var body: some View {
        ZStack {
            if goFullScreen == false {
                Rectangle()
                    .foregroundStyle(.orange)
                    .matchedGeometryEffect(id: "box", in: namespace)
                    .frame(width: 300, height: 300)
//                    .clipShape(RoundedRectangle(cornerRadius: 60.0)) --> Breaks
            } else {
                Rectangle()
                    .foregroundStyle(.orange)
                    .matchedGeometryEffect(id: "box", in: namespace)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
//                    .clipShape(RoundedRectangle(cornerRadius: 0.0)) --> Breaks
            }
        }
        .animation(.linear, value: goFullScreen)
        .onTapGesture {
            goFullScreen.toggle()
        }
        .preferredColorScheme(.dark)
    }
}

这已经很接近了，但很明显角点没有动画。

struct ContentView: View {
    @Namespace private var namespace
    @State private var goFullScreen = false
 
    var body: some View {
        ZStack {
            if goFullScreen == false {
                RoundedRectangle(cornerRadius: 60.0)
                    .fill(.orange)
                    .matchedGeometryEffect(id: "box", in: namespace)
                    .frame(width: 300, height: 300)
            } else {
                RoundedRectangle(cornerRadius: 0.0)
                    .fill(.orange)
                    .matchedGeometryEffect(id: "box", in: namespace)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
        }
        .animation(.linear, value: goFullScreen)
        .onTapGesture {
            goFullScreen.toggle()
        }
        .preferredColorScheme(.dark)
    }
}

有人有解决办法吗？

Answer 1

您可以尝试这种方法，如示例代码所示。似乎对我有用。

 struct ContentView: View {
     @Namespace private var namespace
     @State private var goFullScreen = false
     
     var body: some View {
         RoundedRectangle(cornerRadius: goFullScreen ? 0 : 60.0)
             .fill(.orange)
             .matchedGeometryEffect(id: "box", in: namespace)
             .frame(maxWidth: goFullScreen ? .infinity : 300,
                    maxHeight: goFullScreen ? .infinity : 300)
             .clipShape(RoundedRectangle(cornerRadius: goFullScreen ? 0 : 60.0))
             .animation(.linear, value: goFullScreen)
             .onTapGesture {
                 goFullScreen.toggle()
             }
             .preferredColorScheme(.dark)
     }
 }