SwiftUI中NavigationView嵌套TabView时如何为各子视图设置独立navigationTitle

根因说明 #

navigationTitle 修饰符仅对其所在层级的最近一层父级导航容器生效。你当前的结构为 NavigationView -> TabView -> 子视图，navigationTitle 加在Tab内部的子视图上时，无法向上传递到外层的 NavigationView，只有直接加在 TabView 层级才会生效，因此会出现所有Tab共用统一标题的问题。

方案1：将导航容器放到每个Tab内部（官方推荐） #

将 NavigationView 从 TabView 外层移到每个Tab的子视图层级，让每个Tab拥有独立的导航栈，切换Tab时导航状态互不干扰，同时每个子视图的 navigationTitle 可以正常生效。
示例代码如下：

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationView {
                Text("Hello")
                    .navigationTitle("Title One")
            }
            .tabItem {
                Image(systemName: "square.stack")
            }
            
            NavigationView {
                Text("Hello Again")
                    .navigationTitle("Title Two")
            }
            .tabItem {
                Image(systemName: "checkmark.square")
            }
        }
    }
}

方案2：绑定Tab选中状态动态设置标题 #

如果你需要让所有Tab共用同一个全局导航栈，可以通过状态变量绑定当前选中的Tab索引，在 TabView 层级动态设置导航标题。
示例代码如下：

struct ContentView: View {
    // 绑定当前选中的Tab索引
    @State private var selectedTab = 0
    
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                Text("Hello")
                    .tag(0)
                    .tabItem {
                        Image(systemName: "square.stack")
                    }
                
                Text("Hello Again")
                    .tag(1)
                    .tabItem {
                        Image(systemName: "checkmark.square")
                    }
            }
            // 根据选中的Tab动态切换标题
            .navigationTitle(selectedTab == 0 ? "Title One" : "Title Two")
        }
    }
}

版本适配说明 #

如果你的应用最低支持iOS 16及以上版本，建议使用已经取代NavigationView的NavigationStack容器，上述两种方案的逻辑完全通用，只需把NavigationView替换为NavigationStack即可。

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