SwiftUI中Menu标签内的matchedGeometryEffect动画异常问题

问题重现 #

在SwiftUI卡片切换选中状态时，使用matchedGeometryEffect实现图片的平滑过渡动画，但当图片作为Menu的标签时，选中状态切换会出现异常动画（图片从底部弹出），仅取消选中时动画正常；将图片移出Menu标签后，动画恢复正常。

解决方案：分离动画元素与Menu交互区域 #

核心思路是把负责动画的图片和Menu的触发区域分开，让matchedGeometryEffect作用在独立的图片上，同时用透明按钮触发Menu，既保留Menu的原生交互反馈，又保证动画正常运行。

修改后的示例代码：

import SwiftUI

struct ContentView: View {
    @State var selected = false
    @Namespace var animation
    @State private var isMenuPresented = false // 控制Menu展示状态
    
    var body: some View {
        VStack {
            Text(selected ? "Selected card" : "Deselected card")
                .font(.title)
                .padding(20)
            
            if selected {
                HStack {
                    Button(action: {}, label: {
                        Image(systemName: "trash")
                    })
                    Spacer()
                    
                    // 独立的动画图片
                    Image(systemName: "paperplane")
                        .matchedGeometryEffect(id: "send", in: animation)
                        .overlay {
                            // 透明按钮触发Menu，不影响动画
                            Button(action: {
                                isMenuPresented = true
                            }, label: {
                                Color.clear
                                    .contentShape(Rectangle()) // 确保点击区域覆盖图片
                            })
                        }
                    
                    // 隐藏的Menu，通过isPresented控制展示
                    Menu(content: {
                        Button("Order Now", action: {})
                        Button("Adjust Order", action: {})
                    }, label: { EmptyView() })
                    .menuStyle(.borderlessButton)
                    .opacity(0)
                    .isPresented($isMenuPresented)
                }
                .padding(20)
            } else {
                HStack {
                    Text("Timestamp")
                    Spacer()
                    Image(systemName: "paperplane")
                        .matchedGeometryEffect(id: "send", in: animation)
                }
            }
        }
        .foregroundColor(.white)
        .padding(20)
        .background(.blue)
        .clipShape(RoundedRectangle(cornerRadius: 24))
        .onTapGesture {
            withAnimation {
                selected.toggle()
            }
        }
        .padding(20)
    }
}

方案说明 #

1. 分离动画与交互：动画图片不再作为Menu的标签，而是独立存在，确保matchedGeometryEffect能正确追踪其布局变化，避免Menu内部视图层级干扰动画。
2. 保留Menu原生反馈：用透明按钮覆盖在图片上触发Menu，点击时图片会像原生Menu标签一样变暗，保留系统默认的交互反馈。
3. 隐藏式Menu控制：通过isPresented绑定控制Menu的展示，Menu本身用EmptyView作为标签并设置透明，不影响界面布局。

轻量化替代方案 #

如果你的Menu不需要复杂的自定义样式，也可以用.contextMenu替代Menu组件，contextMenu的触发元素可以正常应用matchedGeometryEffect，代码更简洁：

// 选中状态下的HStack替换为：
HStack {
    Button(action: {}, label: {
        Image(systemName: "trash")
    })
    Spacer()
    Image(systemName: "paperplane")
        .matchedGeometryEffect(id: "send", in: animation)
        .contextMenu {
            Button("Order Now", action: {})
            Button("Adjust Order", action: {})
        }
}
.padding(20)

这个方法直接给动画图片添加contextMenu，既满足交互需求，又不会破坏matchedGeometryEffect的动画效果。

内容的提问来源于stack exchange，提问作者Mark Schmidt