隐藏返回按钮时NavigationStack缩放转场与推送动画不一致问题

当你在SwiftUI中使用NavigationStack并配置.zoom转场，同时将详情视图的navigationBarBackButtonHidden设为true时，关闭详情视图会出现导航栏默认推送动画与自定义转场冲突的问题。以下是两种可行的解决思路：

方法一：同步导航栏样式并禁用其动画 #

让详情视图的导航栏与主视图保持完全一致的样式，同时禁用导航栏自身的动画，确保只有内容区域执行自定义转场。

修改后的DetailView代码：

struct DetailView: View {
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        ZStack{
            Color.indigo
            Text("body here")
        }
        .ignoresSafeArea()
        .navigationBarBackButtonHidden(true)
        // 强制导航栏保持可见，匹配主视图状态
        .toolbar(.visible, for: .navigationBar)
        // 同步主视图的导航栏标题与显示模式，避免切换时的标题动画
        .navigationTitle("Main")
        .navigationBarTitleDisplayMode(.inline)
        // 禁用导航栏的背景动画
        .toolbarBackground(.visible, for: .navigationBar)
        // 全局禁用当前视图导航栏相关动画
        .animation(nil, value: UUID())
        // 自定义返回按钮（按需添加）
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button {
                    dismiss()
                } label: {
                    Image(systemName: "chevron.left")
                        .foregroundColor(.white)
                }
            }
        }
    }
}

方法二：配置导航转场并禁用交互式返回 #

通过navigationTransition的配置禁用系统默认的交互式返回，同时强制详情视图导航栏与主视图对齐：

修改后的NavigationLink部分代码：

NavigationLink {
    DetailView()
        .navigationBarBackButtonHidden(true)
        .navigationTransition(.zoom(sourceID: "world", in: namespace)
            .animation(.easeInOut)
            // 禁用系统默认的交互式返回动画
            .interactiveDismissDisabled())
        // 同步主视图导航栏样式
        .navigationTitle("Main")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar(.visible, for: .navigationBar)
        .toolbarBackground(.visible, for: .navigationBar)
} label: {
    Image(systemName: "globe")
        .matchedTransitionSource(id: "world", in: namespace)
}

核心原理 #

问题的根源是当隐藏返回按钮后，SwiftUI会默认触发导航栏的状态变化动画（如标题切换、按钮显隐）。通过同步主/详情视图的导航栏样式、禁用导航栏自身动画，可以让导航栏保持静态，只让内容区域执行自定义的.zoom转场效果。

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