SwiftUI中NavigationLink跳转目标嵌套NavigationView导致导航栏空白问题

问题根因 #

• SwiftUI 导航栈仅需要在根视图声明一次 NavigationView，二级页面重复声明会导致双层导航栏叠加，顶部空白区域就是第一层导航栏的占位区域。
• 移除二级页面 NavigationView 后工具栏不生效，是因为导航相关修饰符（navigationBarTitle、toolbar 等）需要挂载到 NavigationView 内部的子视图上，原代码将修饰符挂载到了 NavigationView 外层，因此不生效。

问题效果图：

修复代码 #

根视图 ContentView 调整 #

将 navigationBarTitle 修饰符移到 NavigationView 内部的子视图上：

import SwiftUI

struct Item: Identifiable {
    let id = UUID()
    let title: String
}

struct ContentView: View {
    @State private var items: [Item] = [
        Item(title: "Apple"),
        Item(title: "Banana"),
        Item(title: "Papaya"),
        Item(title: "Mango")
    ]
    
    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    NavigationLink {
                        SecondView()
                    } label: {
                        Text(item.title)
                    }
                }
            }
            .navigationBarTitle("ContentView")
        }
    }
}

二级页面 SecondView 调整 #

移除多余的 NavigationView，直接在根视图上挂载导航相关修饰符：

struct SecondView: View {
    @State private var items: [Item] = [
        Item(title: "Carrot"),
        Item(title: "Cucumber"),
        Item(title: "Lettuce")
    ]
    
    var body: some View {
        List{
            ForEach(items) { item in
                Text(item.title)
            }
        }
        .navigationBarTitle("SecondView")
        // 工具栏可正常挂载生效
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Button("自定义按钮") {
                    // 按钮业务逻辑
                }
            }
        }
    }
}

补充说明 #

如果你的项目最低支持版本为 iOS 16+，推荐使用苹果官方推荐的 NavigationStack 替换已废弃的 NavigationView，导航栈管理逻辑更清晰，不会出现类似嵌套异常问题。

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