时间戳

首页 > 解决方案 > 模拟器和电话不显示相同的匹配几何效果结果

swift - 模拟器和电话不显示相同的匹配几何效果结果

问题描述

我有一个非常简单的例子，我想让一个正方形更大。在模拟器中一切看起来都很好，但是当我在手机上运行它时，正方形变得透明。

在模拟器上

在电话上

内容视图

struct ContentView: View {
    @Environment(\.managedObjectContext) private var viewContext
    @Namespace var animation
    @State var isBig:Bool = false
    var body: some View {
        ZStack {
            Color(.red)
            if(!isBig){
                RectangleViewSmoll(isBig:$isBig, animation: animation)
            }
            if(isBig){
                RectangleViewBig(isBig:$isBig,animation: animation)
            }
        }
        .ignoresSafeArea()
    }
}

小矩形

struct RectangleViewSmoll: View {
    @Binding var isBig:Bool
    var animation:Namespace.ID
    var body: some View {
        Rectangle()
            .matchedGeometryEffect(id: "rectangle", in: animation)
            .frame(width: 50, height: 50)
            .onTapGesture {
                withAnimation(.easeIn(duration: 2)){
                    isBig.toggle()
                }
            }
    }
}

大长方形

struct RectangleViewBig: View {
    @Binding var isBig:Bool
    var animation:Namespace.ID
    var body: some View {
        Rectangle()
            .matchedGeometryEffect(id: "rectangle", in: animation)
            .frame(width: 500, height: 500)
            .onTapGesture {
                withAnimation(.easeIn(duration: 2)){
                    isBig.toggle()
                }
            }
    }
}

标签： swiftswiftuisimulator

解决方案

问题在于动画线，尝试这样可以解决您的问题：

Rectangle()
            .matchedGeometryEffect(id: "rectangle", in: animation)
            .frame(width: 500, height: 500)
            .onTapGesture {
                isBig.toggle()
            }
            .animation(.easeIn(duration: 2))

推荐阅读