如何在NavigationStack所有子屏幕中保持工具栏一致显示？

问题原因 #

你把Toolbar修饰符加在了根视图LandingScreen上，导致只有根视图所在的导航层级会显示该Toolbar；跳转到DetailScreen后，新的导航层级不会继承根视图的Toolbar，所以购物车按钮消失。而直接给NavigationStack加Toolbar后消失，通常是因为未指定导航栏标题显示模式，导致导航栏布局异常。

解决方案一：全局共享Toolbar（推荐） #

将Toolbar修饰符直接应用到NavigationStack上，配合指定导航栏标题显示模式，让所有栈内页面自动继承该Toolbar：

修改后的导航栈代码：

var body: some View {
    NavigationStack(path: $navigation.navigationPath) {
        LandingScreen()
            .navigationDestination(for: Item.self) { item in
                DetailScreen(item: item)
            }
    }
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button(action: {
                // TODO: 添加点击逻辑
            }) {
                Image(systemName: "cart")
            }
        }
        ToolbarItem(placement: .principal) {
            Text("Store") // 本地会添加自定义字体，所以保留此写法
        }
    }
    .navigationBarTitleDisplayMode(.inline) // 确保导航栏布局稳定
}

如果需要给详情页设置单独的导航标题，修改DetailScreen：

struct DetailScreen : View {
    let item: Item
    var body: some View {
        Text("Detail Screen for \(item.name)")
            .navigationTitle(item.name) // 可选：设置详情页专属标题
    }
}

解决方案二：复用Toolbar组件（灵活自定义） #

如果需要不同页面保留部分共享Toolbar、同时添加自定义项，可以先定义共享Toolbar组件：

struct SharedCartToolbar: ToolbarContent {
    var body: some ToolbarContent {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button(action: {
                // TODO: 添加点击逻辑
            }) {
                Image(systemName: "cart")
            }
        }
    }
}

然后在LandingScreen中添加完整Toolbar：

struct LandingScreen : View {
    // ... 原有代码 ...
    var body: some View {
        ScrollView(showsIndicators: false) {
            // ... 原有列表代码 ...
        }
        .padding([.leading, .trailing])
        .toolbar {
            SharedCartToolbar()
            ToolbarItem(placement: .principal) {
                Text("Store")
            }
        }
    }
}

在DetailScreen中添加共享Toolbar+自定义内容：

struct DetailScreen : View {
    let item: Item
    var body: some View {
        Text("Detail Screen for \(item.name)")
            .toolbar {
                SharedCartToolbar()
                // 可选：添加详情页专属Toolbar项
            }
            .navigationTitle(item.name)
    }
}

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