求助：嵌套在分页TabView中的NavigationStack渲染异常

我需要实现带导航栏的横向分页效果，但使用TabView并设置.page样式时，内部嵌套多个NavigationStack会出现渲染异常。

正常工作的标签式代码 #

var body: some View {
  TabView(selection: $selectedTab) {
    NavigationStack {
      List {
        Text("Page 1")
      }
      .tag(LandingPage.activity)
      .navigationTitle("Title")
    }
    .tabItem {
      Text("Tab 1")
    }
    NavigationStack {
      List {
        Text("Page 2")
      }
      .tag(LandingPage.activity)
      .navigationTitle("Title 2")
    }
    .tabItem {
      Text("Tab 2")
    }
  }.tabViewStyle(.automatic)
}

切换为Page样式后出现渲染异常的代码 #

var body: some View {
  TabView(selection: $selectedTab) {
    NavigationStack {
      List {
        Text("Page 1")
      }
      .tag(LandingPage.activity)
      .navigationTitle("Title")
    }
    NavigationStack {
      List {
        Text("Page 2")
      }
      .tag(LandingPage.activity)
      .navigationTitle("Title 2")
    }
  }.tabViewStyle(.page)
}

解决方案 #

问题根源在于多个NavigationStack嵌套在.page样式的TabView内部时，会触发布局冲突。正确的做法是将NavigationStack提升到TabView外层，让整个分页容器共享同一个导航栈，每个分页页面作为导航栈的根内容：

var body: some View {
  NavigationStack {
    TabView(selection: $selectedTab) {
      // 分页页面1
      List {
        Text("Page 1")
      }
      .tag(LandingPage.activity)
      .navigationTitle("Title")
      
      // 分页页面2
      List {
        Text("Page 2")
      }
      .tag(LandingPage.another) // 注意修正重复的tag值，确保与枚举成员一一对应
      .navigationTitle("Title 2")
    }
    .tabViewStyle(.page)
    .navigationBarTitleDisplayMode(.inline) // 可选：统一设置导航栏显示模式
  }
}

额外注意事项 #

• 原代码中两个页面使用了相同的.tag(LandingPage.activity)，这会导致TabView的选择逻辑失效，必须修正为对应不同的枚举成员。
• 每个分页页面仍可通过.navigationTitle、.toolbar等修饰符单独配置导航栏内容，外层NavigationStack会自动适配页面切换时的导航栏变化。

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