SwiftUI 中的匹配几何效果不起作用

Posted 2023-02-24

【中文标题】SwiftUI 中的匹配几何效果不起作用

【英文标题】：Matched Geometry Effect in SwiftUI is not working

【发布时间】：2021-12-28 16:25:47

【问题描述】：

我想知道为什么我的matchedGeometryEffect 没有按预期工作。我做错什么了吗？因为this guy（在 3:15）做了同样的事情，而且看起来更流畅。我在 M1 MacBook Air 上运行代码，这意味着速度可能不是问题。 这是我的代码：

struct ContentView: View 
    @Namespace var namespace
    @State var bool = true
    var body: some View 
        HStack
            if bool 
                Rectangle()
                    .frame(width: 100, height: 100)
                    .foregroundColor(Color.red)
                    .padding()
                    .onTapGesture 
                        withAnimation(.spring(response: 0.5, dampingFraction: 0.7))
                            bool.toggle()
                        
                    
                    .matchedGeometryEffect(id: "id", in: namespace)
             else 
                Rectangle()
                    .frame(width: 200, height: 200)
                    .foregroundColor(Color.red)
                    .matchedGeometryEffect(id: "id", in: namespace)
            
        
    

感谢您的帮助，Boothosh

【参考方案1】：

在 SwiftUI 中，修饰符的顺序很重要。这与matchedGeometryEffect(id:in:properties:anchor:isSource:) 相同。

如果您希望矩形在中心展开，则需要将几何图形在中心对齐。为此，我们将拥有相同大小的Rectangles。这意味着Rectangles 都将附加matchedGeometryEffect 修饰符，并在其后添加 then 样式。

代码：

HStack 
    if bool 
        Rectangle()
            .matchedGeometryEffect(id: "id", in: namespace) // <- Here
            .frame(width: 100, height: 100)
            .foregroundColor(Color.red)
            .padding()
            .onTapGesture 
                withAnimation(.spring(response: 0.5, dampingFraction: 0.7)) 
                    bool.toggle()
                
            
     else 
        Rectangle()
            .matchedGeometryEffect(id: "id", in: namespace) // <- Here
            .frame(width: 200, height: 200)
            .foregroundColor(Color.red)