SwiftUI中navigationTitle上方出现白色空白块该如何解决

出现导航栏顶部空白的核心原因是导航标题修饰符的挂载层级错误，以及NavigationView未指定明确样式导致的布局计算异常：

• 你将navigationBarTitle修饰符加在了NavigationView的直接子容器VStack上，而VStack内部是条件渲染的登录页/文档页，两个子页面又单独声明了navigationTitle，导致导航栏高度重复计算，出现多余空白
• 旧版NavigationView默认使用适配多设备的分栏样式，在部分设备上会出现布局偏移

解决方案 #

1. 调整导航标题的挂载位置 #

删除Home结构体内VStack上的.navigationBarTitle("Log in")修饰符，将导航标题分别挂载到对应子页面上：

• 未登录状态下给Login页面单独加.navigationTitle("Log in")
• 已登录状态的Homescreen保留原有的.navigationTitle("Documents")即可

2. 为NavigationView指定明确样式 #

在NavigationView末尾添加.navigationViewStyle(.stack)，强制使用堆栈式导航布局，避免分栏样式导致的异常：

NavigationView{
    // 原有VStack内容
}
.navigationViewStyle(.stack) // 新增这行

如果你的App最低支持iOS 16+，建议直接替换为更稳定的NavigationStack替代已废弃的NavigationView。

3. 强制指定导航栏显示模式（可选） #

如果调整后仍有空白，可以在导航标题后明确声明显示模式，避免系统自动计算大标题/内嵌样式时的布局错误：

.navigationTitle("Documents")
.navigationBarTitleDisplayMode(.inline) // 可选填.large对应大标题样式

修改后的核心代码示例 #

struct Home : View {
    @State var show = false
    @State var status = UserDefaults.standard.value(forKey: "status") as? Bool ?? false
    
    var body: some View{
        NavigationView{
            VStack{
                if self.status{
                    Homescreen()
                } else {
                    Login(show: self.$show)
                        .navigationTitle("Log in") // 标题移到登录页上
                }
            }
            .onAppear {
                NotificationCenter.default.addObserver(forName: NSNotification.Name("status"), object: nil, queue: .main) { (_) in
                    self.status = UserDefaults.standard.value(forKey: "status") as? Bool ?? false
                }
            }
        }
        .navigationViewStyle(.stack) // 新增样式指定
    }
}

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