SwiftUI List中使用.matchedGeometryEffect实现图片转场动画异常问题

• 关闭全屏无动画：触发全屏的Button嵌套在NavigationLink的label内，点击事件冲突，系统同时响应全屏展示和页面跳转操作，破坏了matchedGeometryEffect的动画上下文；且未给matchedGeometryEffect指定isSource参数，系统无法正确判断动画过渡的源视图。
• push返回后动画异常：导航跳转到下一页时，原列表页视图处于非活跃状态，matchedGeometryEffect绑定的源视图标记丢失，返回后系统无法正确匹配源/目标视图，导致动画逻辑错乱。

1. 拆分列表行内的点击逻辑，将页面跳转触发区域和图片点击触发区域分开，避免事件冲突。
2. 为两个绑定同一id的matchedGeometryEffect添加isSource参数，明确状态切换时的动画基准：小图展示时小图为源视图，全屏展示时大图为源视图。
3. 给全屏视图添加zIndex修饰符，确保动画过程中视图层级正确，不会被列表内容遮挡。

struct ContentView: View {
    
    @Namespace private var animation
    @State private var showFullScreen = false
    
    var body: some View {
        // iOS16以下可替换为NavigationView
        NavigationStack {
            ZStack {
                List {
                    HStack(alignment: .center, spacing: 16) {
                        // 行主体区域，点击触发导航跳转
                        NavigationLink {
                            Text("Hello World")
                        } label: {
                            Text("点击行跳转")
                                .frame(maxWidth: .infinity, alignment: .leading)
                        }
                        // 图片区域，点击触发全屏动画
                        Button {
                            withAnimation(.easeInOut(duration: 0.3)) {
                                showFullScreen = true
                            }
                        } label: {
                            Image(uiImage: UIImage(named: "image") ?? UIImage())
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 60, height: 60)
                                .clipped()
                                .matchedGeometryEffect(id: "ident", in: animation, isSource: !showFullScreen)
                        }
                        .buttonStyle(PlainButtonStyle())
                    }
                    .padding()
                }
                
                if showFullScreen {
                    ZStack {
                        Color.black
                            .ignoresSafeArea()
                        Image(uiImage: UIImage(named: "image") ?? UIImage())
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .matchedGeometryEffect(id: "ident", in: animation, isSource: showFullScreen)
                    }
                    .zIndex(1)
                }
            }
            .navigationTitle("Geometry Test")
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("Dismiss") {
                        withAnimation(.easeInOut(duration: 0.3)) {
                            showFullScreen = false
                        }
                    }
                }
            }
        }
    }
}

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