SwiftUI：如何修复防止 y 方向比 x 方向发生更快的转换？

Question

我正在尝试在两个视图之间创建过渡。由于我目前正在测试过渡，因此两个视图都非常简单。

第一个名为“Playground5”的视图包含一个小矩形，我想将其转换到第二个视图“Playground 6”，其中包含相同颜色的全屏矩形。

我希望过渡到向外“扩展”和“向内”。

两个视图之间的转换有效，但看起来有点奇怪。

当矩形展开时，它会先于边到达顶部和底部，而不是同时到达。。

关于如何解决这个问题有什么想法吗？

import SwiftUI

struct Playground5: View {
    @State private var expandRectangle = false
    @Namespace private var namespace

    var body: some View {
        VStack {
            if expandRectangle {
                Playground6(expandRectangle: $expandRectangle, namespace: namespace)
//                    .matchedGeometryEffect(id: "rectangle", in: namespace)
            } else {
                Rectangle()
                    .foregroundColor(Color.red)
                    .frame(width: 200, height: 400)
//                    .frame(width: expandRectangle ? 400 : 200, height: expandRectangle ? 600 : 400)
                    .onTapGesture {
                        withAnimation {
                            expandRectangle.toggle()
                        }
                    }
                    .matchedGeometryEffect(id: "rectangle", in: namespace, properties: .position, anchor: .center)
            }
        }
        .ignoresSafeArea(.all)
    }
}

struct Playground6: View {
    @Binding var expandRectangle: Bool
    var namespace: Namespace.ID
    @Namespace private var namespace2
    var body: some View {
//        ZStack {
            Rectangle()
            .onTapGesture {
                withAnimation {
                    expandRectangle.toggle()
                }
            }
                .foregroundColor(Color.red)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
               
                .ignoresSafeArea(.all)
                
                .matchedGeometryEffect(id: "rectangle",in: namespace)
    }
}

Answer 1

ignoresSafeArea

应该设置在整个事物的容器上，而不是每个单独的组件上，否则（我认为）命名空间不会考虑安全区域。如果我从

ignoresSafeArea

和

Playground5

中删除

Playground6

修改器并进行如下预览：

static var previews: some View {
    Playground5()
        .ignoresSafeArea(.all)
}

视图正常缩放。

当放慢动画速度时，问题更容易看到，您可以看到它击中安全区域的边缘，然后跳跃以填充其余区域：

withAnimation(.easeInOut(duration: 5)) {
    expandRectangle.toggle()
}