SwiftUI：嵌入Page样式TabView时NavigationStack显示异常

问题场景 #

我编写了一个包含NavigationStack的Parcels视图，单独预览一切正常，但将其嵌入.page样式的TabView后出现异常。

Parcels视图代码 #

import SwiftUI

struct Parcels: View {
    @Binding var searchText: String

    var body: some View {
        NavigationStack{
            List{
                // 自定义列表内容
            }
            .listStyle(.plain)
            .navigationTitle("Parcels")
            .navigationBarTitleDisplayMode(.automatic)
        }
        .searchable(text: $searchText, prompt: "Search")
    }
}

MainView代码（嵌入TabView后的结构） #

import SwiftUI

struct MainView: View {
    @State private var selectedTab = 0
    @State private var searchText = "" // 补充原代码缺失的状态定义

    var body: some View {
        TabView (selection: $selectedTab) {
            // Parcels标签页
            Parcels(searchText: $searchText)
                .tabItem {
                    Label("Parcels", systemImage: "shippingbox.fill")
                }
                .tag(0)
                .sensoryFeedback(.success, trigger: selectedTab == 0)
            
            // Settings标签页
            Settings()
                .tabItem {
                    Label("Settings", systemImage: "gearshape.fill")
                }
                .tag(1)
                .sensoryFeedback(.success, trigger: selectedTab == 1)

        }
        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .always))
    }
}

出现的问题 #

• Parcels视图的NavigationStack工具栏显示异常
• 搜索栏在MainView中完全不显示，但单独预览Parcels时正常
  仅当TabView使用.page样式时触发该问题

已尝试的调整 #

将MainView的TabView嵌入另一个NavigationStack后，NavigationStack显示恢复正常，但标题始终为inline模式，搜索栏仍不显示。

解决方案 #

问题核心是页面样式的TabView会拦截子视图的NavigationStack和searchable修饰符，需要调整层级结构：

1. 移除Parcels内部的NavigationStack，将MainView整体包裹在一个顶层NavigationStack中
2. 将导航标题、搜索栏等修饰符绑定到对应的Tab页上，而非放在子视图内部

调整后的Parcels视图 #

import SwiftUI

struct Parcels: View {
    @Binding var searchText: String

    var body: some View {
        List{
            // 自定义列表内容
        }
        .listStyle(.plain)
    }
}

调整后的MainView #

import SwiftUI

struct MainView: View {
    @State private var selectedTab = 0
    @State private var searchText = ""

    var body: some View {
        NavigationStack {
            TabView(selection: $selectedTab) {
                // Parcels标签页配置
                Parcels(searchText: $searchText)
                    .tabItem {
                        Label("Parcels", systemImage: "shippingbox.fill")
                    }
                    .tag(0)
                    .sensoryFeedback(.success, trigger: selectedTab == 0)
                    .navigationTitle("Parcels")
                    .navigationBarTitleDisplayMode(.automatic)
                    .searchable(text: $searchText, prompt: "Search")

                // Settings标签页配置
                Settings()
                    .tabItem {
                        Label("Settings", systemImage: "gearshape.fill")
                    }
                    .tag(1)
                    .sensoryFeedback(.success, trigger: selectedTab == 1)
                    .navigationTitle("Settings") // 按需配置Settings页的导航标题
            }
            .tabViewStyle(.page)
            .indexViewStyle(.page(backgroundDisplayMode: .always))
        }
    }
}

补充说明 #

• 页面样式的TabView作为容器时，子视图的独立NavigationStack会被压制，统一使用顶层NavigationStack才能保证交互正常
• searchable修饰符需要与当前激活的导航栈绑定，放在Tab页内部可确保切换标签时，搜索栏和标题能正确对应切换
• 如果Settings视图也需要导航相关配置，可在其Tab项上添加对应的修饰符

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