iOS16中TabView嵌套NavigationStack如何设置各标签页独立导航标题

你遇到的问题是因为在TabView外部统一设置了navigationTitle，导致所有标签页共享同一个标题。有两种常用方法可以实现每个标签页独立设置导航标题：

方法一：根据选中的标签动态切换标题 #

利用selection的当前值，动态绑定对应的导航标题，适合标题固定且不需要子视图自主控制标题的场景：

struct ContentView: View {
    @State var selection = 1
    // 建立标签与标题的映射关系
    private let tabTitles = [
        1: "Received",
        2: "Sent",
        3: "Third Tab"
    ]
    
    var body: some View {
        NavigationStack {
            TabView(selection: $selection) {
                LaunchView()
                    .badge(2)
                    .tabItem {
                        Label("Received", systemImage: "tray.and.arrow.down.fill")
                    }
                    .tag(1)
                DeView()
                    .tabItem {
                        Label("Sent", systemImage: "tray.and.arrow.up.fill")
                    }
                    .tag(2)
                DeView()
                    .tabItem {
                        Label("Third", systemImage: "tray.and.arrow.up.fill")
                    }
                    .tag(3)
            }
            // 根据当前选中的标签动态设置标题
            .navigationTitle(tabTitles[selection] ?? "Default")
        }
    }
}

方法二：在子视图内部设置导航标题 #

如果需要子视图根据自身状态动态修改标题（比如详情页跳转时的标题变化），可以在每个子视图中直接添加navigationTitle，外层的NavigationStack会自动识别并切换：

修改子视图示例： #

struct LaunchView: View {
    var body: some View {
        Text("Received Page")
            .navigationTitle("Received") // 子视图独立设置标题
    }
}

struct DeView: View {
    var body: some View {
        Text("Sent Page")
            .navigationTitle("Sent") // 子视图独立设置标题
    }
}

修改后的ContentView： #

struct ContentView: View {
    @State var selection = 1
    
    var body: some View {
        NavigationStack {
            TabView(selection: $selection) {
                LaunchView()
                    .badge(2)
                    .tabItem {
                        Label("Received", systemImage: "tray.and.arrow.down.fill")
                    }
                    .tag(1)
                DeView()
                    .tabItem {
                        Label("Sent", systemImage: "tray.and.arrow.up.fill")
                    }
                    .tag(2)
                DeView()
                    .tabItem {
                        Label("Third", systemImage: "tray.and.arrow.up.fill")
                    }
                    .tag(3)
            }
            // 移除这里统一的navigationTitle
        }
    }
}

两种方法都能实现标签页独立导航标题的效果，你可以根据实际需求选择：如果标题固定，方法一更简洁；如果子视图需要自主控制标题，方法二更灵活。

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