如何让视图忽略导航标题，在屏幕垂直方向真正居中？

在使用NavigationStack/NavigationView时，加载状态或无内容场景下需要显示一个屏幕正中心的提示视图，但添加.navigationTitle()后，导航栏会占用空间，导致原本居中的内容（比如ProgressView）位置低于视觉上的真正中心。

尝试过用GeometryReader计算偏移量（proxy.size.height / 2 - geo.safeAreaInsets.top - geo.safeAreaInsets.bottom）实现效果，但这种方法比较繁琐，希望找到更简洁的解决方案。

对比效果：

• 无标题时：视图位于屏幕正中心
• 有标题时：视图位置偏下（因导航栏占用空间）

示例代码：

var body: some View {
    NavigationStack {
        ProgressView()
            .controlSize(.large)
            .navigationTitle("Feed") // 仅添加了这一行导致偏移
    }
}

解决方案1：用ignoresSafeArea结合frame强制居中 #

让居中视图忽略导航栏的布局影响，直接基于整个屏幕尺寸居中：

var body: some View {
    NavigationStack {
        ProgressView()
            .controlSize(.large)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .ignoresSafeArea(edges: .top) // 忽略顶部安全区，抵消导航栏的空间占用
            .navigationTitle("Feed")
    }
}

原理：frame(maxWidth: .infinity, maxHeight: .infinity)让视图占满整个容器，ignoresSafeArea(edges: .top)让布局不考虑顶部导航栏的安全区，从而让内容真正居中。

解决方案2：将居中视图作为NavigationStack的overlay #

把提示视图直接叠加在整个NavigationStack上层，完全不受导航栏布局影响：

var body: some View {
    NavigationStack {
        // 这里放正常加载完成后的内容
        // Text("Feed Content")
    }
    .navigationTitle("Feed")
    .overlay {
        // 加载/无内容时显示的居中视图
        ProgressView()
            .controlSize(.large)
            // 根据加载状态控制显隐，比如绑定isLoading变量
            // .opacity(isLoading ? 1 : 0)
    }
}

原理：overlay的视图是基于父视图（整个NavigationStack）的边界来布局的，天然会处于屏幕正中心，和导航栏的布局完全独立。

解决方案3：用ZStack分离导航栏和内容布局 #

通过ZStack让导航栏和内容视图分层，内容视图直接基于屏幕尺寸居中：

var body: some View {
    ZStack {
        // 内容层：直接占满屏幕并居中
        ProgressView()
            .controlSize(.large)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        
        // 导航栏层
        NavigationStack {
            Color.clear // 空内容，仅承载导航栏
        }
        .navigationTitle("Feed")
    }
}

原理：ZStack的层级布局让内容视图不受NavigationStack的容器约束，直接基于屏幕居中，导航栏叠加在上方不影响内容的位置。

内容的提问来源于stack exchange，提问作者dve.exe