使用matchedGeometryEffect与NavigationView时动画异常问题求助

问题场景 #

在嵌入NavigationView的列表页面中使用matchedGeometryEffect实现元素过渡动画，跳转到同样包含NavigationView的详情页面时，虽然匹配动画能完成，但切换视图过程中会出现类似导航栈回退的摆动效果；注释掉详情页面的NavigationView后，匹配几何动画即可正常工作，适配iOS14.0及以上系统。

问题原因 #

两个独立的NavigationView会各自维护自身的导航栏布局与动画状态，当页面切换时，两个导航栏的位置、尺寸变化会产生布局冲突，叠加后导致目标元素出现额外的偏移摆动，干扰matchedGeometryEffect的精准匹配动画。

解决方案 #

只保留**一个根NavigationView**作为整个页面的导航容器，详情页面不再单独嵌套NavigationView，而是借助根导航栈的导航栏来统一控制页面标题、导航按钮等元素，避免多重导航容器的布局冲突。

示例代码 #

有问题的实现（含摆动效果）

import SwiftUI

struct ListView: View {
    @Namespace var namespace
    @State private var showDetail = false
    
    var body: some View {
        NavigationView {
            VStack {
                Button("跳转到详情") {
                    withAnimation {
                        showDetail = true
                    }
                }
                .background(Color.blue)
                .matchedGeometryEffect(id: "transitionButton", in: namespace)
            }
            .navigationTitle("列表页")
        }
        .fullScreenCover(isPresented: $showDetail) {
            DetailView(namespace: namespace)
        }
    }
}

struct DetailView: View {
    let namespace: Namespace.ID
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        NavigationView { // 重复嵌套的NavigationView导致摆动
            VStack {
                Button("返回") {
                    withAnimation {
                        dismiss()
                    }
                }
                .background(Color.blue)
                .matchedGeometryEffect(id: "transitionButton", in: namespace)
            }
            .navigationTitle("详情页")
        }
    }
}

修复后的实现（动画正常）

import SwiftUI

struct ListView: View {
    @Namespace var namespace
    @State private var showDetail = false
    
    var body: some View {
        NavigationView { // 仅保留根NavigationView
            VStack {
                Button("跳转到详情") {
                    withAnimation {
                        showDetail = true
                    }
                }
                .background(Color.blue)
                .matchedGeometryEffect(id: "transitionButton", in: namespace)
            }
            .navigationTitle("列表页")
            .fullScreenCover(isPresented: $showDetail) {
                DetailView(namespace: namespace)
            }
        }
    }
}

struct DetailView: View {
    let namespace: Namespace.ID
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        VStack {
            Button("返回") {
                withAnimation {
                    dismiss()
                }
            }
            .background(Color.blue)
            .matchedGeometryEffect(id: "transitionButton", in: namespace)
        }
        .navigationTitle("详情页") // 复用根导航栈的导航栏
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button("返回") {
                    withAnimation {
                        dismiss()
                    }
                }
            }
        }
    }
}

效果说明 #

修复后，matchedGeometryEffect的元素过渡动画会流畅执行，不再出现摆动。若需要为详情页配置独立的导航栏样式（如自定义返回按钮、右侧操作按钮），可通过toolbar、navigationBarItems等API在根导航栈内完成配置，无需重复嵌套NavigationView。

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