iOS 18中SwiftUI导航过渡时出现边距问题求助

问题现象 #

iOS 18及以上版本SwiftUI新增的.navigationTransition转场动画，在执行过程中根视图（如示例中的Form）会收缩，边缘出现白色（浅色模式）或黑色（深色模式）边距。使用自定义背景色/渐变时该问题尤为明显，即使添加.ignoreSafeArea()也无法解决，该边距并非来自安全区域。

解决方案 #

问题根源是转场时根视图收缩，暴露了NavigationStack的默认背景色。可通过以下操作解决：

• 将自定义背景从Form层级移至NavigationStack，确保转场时底层背景与根视图背景一致
• 使用.toolbarBackground强制导航栏背景与全局背景匹配，避免导航栏区域出现不一致的边距

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    @Namespace var namespace
    var body: some View {
        NavigationStack {
            Form {
                NavigationLink {
                    ZStack {
                        Color.yellow.ignoresSafeArea()
                        Text("Detail View")
                    }
                    .navigationTitle("Transition")
                    .navigationTransition(.zoom(sourceID: "hellow", in: namespace))
                } label: {
                    Text("Open")
                        .font(.largeTitle)
                        .matchedTransitionSource(id: "hellow", in: namespace)
                }

            }
            .scrollContentBackground(.hidden)
            // 统一导航栏背景色，强制显示避免透明
            .toolbarBackground(Color.mint, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
        }
        // 给NavigationStack设置全局背景，覆盖默认背景色
        .background(Color.mint.ignoresSafeArea())
    }
}

#Preview {
    ContentView()
}

原理说明 #

转场动画执行时，系统会对根视图（Form）进行缩放或位移操作，此时NavigationStack的默认背景会透过收缩的视图边缘显示。通过给NavigationStack设置全局自定义背景，并同步导航栏背景，就能彻底消除边缘的默认颜色边距。

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