SwiftUI使用NavigationStack时TabBar消失的问题及模块化方案

我有5个带TabBar的页面，代码如下：

struct BaseTabViewUI: View {

@StateObject var routerTask = RouterTask()

var body: some View {
    
    TabView {
        FeedUI()
            .tabItem {
                Label("Feed", systemImage: "house.fill")
            }
        HistoryUI()
            .tabItem {
                Label("History", systemImage: "clock.fill")
            }
        
        TaskListContainerUI()
            .tabItem {
                Label("Task", systemImage: "checkmark.circle.fill")
            }.environmentObject(routerTask)
        
        TreeUI()
            .tabItem {
                Label("Tree", systemImage: "leaf.fill")
            }
        
        UserUI()
            .tabItem {
                Label("User", systemImage: "person.fill")
            }
    }
    .accentColor(.blue)
  }
}

问题在于TaskListContainerUI包含4个页面，导航到子页面（比如AddGroupUI）时TabBar消失，希望保留TabBar，同时想了解如何以可扩展、模块化的方式实现这类容器导航。

相关代码如下：

TaskListContainerUI 代码 #

struct TaskListContainerUI: View {

@EnvironmentObject var routerTask: RouterTask

var body: some View {
    NavigationStack(path: $routerTask.navPath) {
        TaskGroupListUI()
            .navigationDestination(for: RouterTask.Destination.self) { destination in
                switch destination {
                case .taskGroupList:
                    TaskGroupListUI().environmentObject(routerTask)
                case .addGroupTask:
                    AddGroupUI().environmentObject(routerTask)
                case .taskDetailList:
                    TaskDetailListUI().environmentObject(routerTask)
                case .taskDetail:
                    TaskDetailUI().environmentObject(routerTask)
                case .addTaskDetail:
                    AddTaskUI().environmentObject(routerTask)
                }
            }.environmentObject(routerTask)
    }
  }
}

RouterTask 代码 #

final class RouterTask: ObservableObject {

public enum Destination: Codable, Hashable {
    case taskGroupList
    case addGroupTask
    case taskDetailList
    case taskDetail
    case addTaskDetail
}

@Published var navPath = NavigationPath()

func navigate(to destination: Destination) {
    navPath.append(destination)
}

func navigateBack() {
    navPath.removeLast()
}

func navigateToRoot() {
     navPath.removeLast(navPath.count)
 }

}

TaskGroupListUI 代码 #

struct TaskGroupListUI: View {

@EnvironmentObject var routerTask: RouterTask

var body: some View {
    ZStack { // List ve butonu üst üste koyuyoruz
        VStack {
            Spacer()
            HStack {
                Spacer()
                btnAddIcon(iconName: "plus") {
                    routerTask.navigate(to: .addGroupTask)
                }.padding()
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
    }
 }
}

AddGroupUI 代码 #

struct AddGroupUI: View {

@EnvironmentObject var routerTask: RouterTask

var body: some View {
    Text("add group")
  }
}

父视图 TendriaApp 代码 #

@main
struct TendriaApp: App {
   init() {
         FirebaseApp.configure()
    }
@StateObject var authManager = AuthManager()
@StateObject var router = RouterSign()
let persistenceController = PersistenceController.shared
    
var body: some Scene {
    WindowGroup {
        NavigationStack(path: $router.navPath) {
            Group{
                if authManager.checkUserSession() {
                    BaseTabViewUI()
                } else {
                    SignInUI(authManager: authManager)
                }
            }.navigationDestination(for: RouterSign.Destination.self) { destination in
                switch destination {
                case .signIn:
                    SignInUI(authManager: authManager)
                case .signUp:
                    SignUpUI(authManager: authManager)
                case .forgotPassword:
                    ForgotPasswordUI(authManager: authManager)
                case .mainScreen:
                    BaseTabViewUI()
                
                }
            }
        }
        .environmentObject(router)
        .environmentObject(authManager).onAppear {
            UIApplication.shared.addTapGestureRecognizer()
        }
    }
}

一、修复TabBar消失问题 #

TabBar消失的核心原因是：NavigationStack被放在了TabView的子页面内部，导航时新页面会完全覆盖TabBar区域。正确做法是将NavigationStack作为每个Tab项的根容器，确保导航操作在TabBar上方的层级进行。

修改步骤 #

1. 调整BaseTabViewUI，给需要内部导航的Tab项直接包裹NavigationStack
2. 移除TaskListContainerUI内部的NavigationStack，简化模块结构

修改后的BaseTabViewUI：

struct BaseTabViewUI: View {
    @StateObject var routerTask = RouterTask()
    
    var body: some View {
        TabView {
            FeedUI()
                .tabItem {
                    Label("Feed", systemImage: "house.fill")
                }
            HistoryUI()
                .tabItem {
                    Label("History", systemImage: "clock.fill")
                }
            
            // 给Task模块直接包裹NavigationStack
            NavigationStack(path: $routerTask.navPath) {
                TaskGroupListUI()
                    .navigationDestination(for: RouterTask.Destination.self) { destination in
                        switch destination {
                        case .taskGroupList:
                            TaskGroupListUI()
                        case .addGroupTask:
                            AddGroupUI()
                        case .taskDetailList:
                            TaskDetailListUI()
                        case .taskDetail:
                            TaskDetailUI()
                        case .addTaskDetail:
                            AddTaskUI()
                        }
                    }
            }
            .environmentObject(routerTask)
            .tabItem {
                Label("Task", systemImage: "checkmark.circle.fill")
            }
            
            TreeUI()
                .tabItem {
                    Label("Tree", systemImage: "leaf.fill")
                }
            
            UserUI()
                .tabItem {
                    Label("User", systemImage: "person.fill")
                }
        }
        .accentColor(.blue)
    }
}

简化后的TaskListContainerUI：

struct TaskListContainerUI: View {
    var body: some View {
        TaskGroupListUI()
    }
}

调整后，Task模块的所有导航操作都会在TabBar上方的NavigationStack内进行，TabBar将始终保持可见。

二、可扩展模块化导航实现方案 #

为支持后续新增带内部导航的Tab模块，可通过封装通用路由协议、导航容器来实现模块化管理，避免重复代码。

1. 定义通用路由协议 #

统一所有模块路由的基本行为：

protocol RouterProtocol: ObservableObject {
    associatedtype Destination: Codable, Hashable
    var navPath: NavigationPath { get set }
    func navigate(to destination: Destination)
    func navigateBack()
    func navigateToRoot()
}

extension RouterProtocol {
    func navigate(to destination: Destination) {
        navPath.append(destination)
    }
    
    func navigateBack() {
        if !navPath.isEmpty {
            navPath.removeLast()
        }
    }
    
    func navigateToRoot() {
        navPath.removeLast(navPath.count)
    }
}

2. 实现模块专属Router #

每个模块创建独立的Router，避免逻辑耦合：

// Task模块Router
final class TaskRouter: RouterProtocol {
    enum Destination: Codable, Hashable {
        case taskGroupList
        case addGroupTask
        case taskDetailList
        case taskDetail
        case addTaskDetail
    }
    
    @Published var navPath = NavigationPath()
}

// 新增Feed模块Router示例
final class FeedRouter: RouterProtocol {
    enum Destination: Codable, Hashable {
        case feedList
        case feedDetail
    }
    
    @Published var navPath = NavigationPath()
}

3. 封装通用导航容器 #

创建ModuleNavigationContainer，统一处理模块的导航逻辑：

struct ModuleNavigationContainer<Router: RouterProtocol, Content: View>: View {
    @StateObject var router: Router
    let content: Content
    let destinationBuilder: (Router.Destination) -> any View
    
    init(router: Router, @ViewBuilder content: () -> Content, destinationBuilder: @escaping (Router.Destination) -> any View) {
        self._router = StateObject(wrappedValue: router)
        self.content = content()
        self.destinationBuilder = destinationBuilder
    }
    
    var body: some View {
        NavigationStack(path: $router.navPath) {
            content
                .navigationDestination(for: Router.Destination.self) { destination in
                    destinationBuilder(destination)
                        .environmentObject(router)
                }
        }
        .environmentObject(router)
    }
}

4. 在TabView中使用通用容器 #

修改BaseTabViewUI，通过通用容器管理各个模块的导航：

struct BaseTabViewUI: View {
    @StateObject private var taskRouter = TaskRouter()
    @StateObject private var feedRouter = FeedRouter()
    
    var body: some View {
        TabView {
            // Feed模块使用通用导航容器
            ModuleNavigationContainer(router: feedRouter, content: {
                FeedUI()
            }, destinationBuilder: { destination in
                switch destination {
                case .feedList:
                    FeedUI()
                case .feedDetail:
                    FeedDetailUI()
                }
            })
            .tabItem {
                Label("Feed", systemImage: "house.fill")
            }
            
            HistoryUI()
                .tabItem {
                    Label("History", systemImage: "clock.fill")
                }
            
            // Task模块使用通用导航容器
            ModuleNavigationContainer(router: taskRouter, content: {
                TaskGroupListUI()
            }, destinationBuilder: { destination in
                switch destination {
                case .taskGroupList:
                    TaskGroupListUI()
                case .addGroupTask:
                    AddGroupUI()
                case .taskDetailList:
                    TaskDetailListUI()
                case .taskDetail:
                    TaskDetailUI()
                case .addTaskDetail:
                    AddTaskUI()
                }
            })
            .tabItem {
                Label("Task", systemImage: "checkmark.circle.fill")
            }
            
            TreeUI()
                .tabItem {
                    Label("Tree", systemImage: "leaf.fill")
                }
            
            UserUI()
                .tabItem {
                    Label("User", systemImage: "person.fill")
                }
        }
        .accentColor(.blue)
    }
}

5. 模块页面调用Router #

在模块子页面中，通过@EnvironmentObject获取对应Router即可完成导航：

struct TaskGroupListUI: View {
    @EnvironmentObject var router: TaskRouter
    
    var body: some View {
        ZStack {
            VStack {
                Spacer()
                HStack {
                    Spacer()
                    Button(action: {
                        router.navigate(to: .addGroupTask)
                    }) {
                        Image(systemName: "plus")
                            .font(.title)
                            .padding()
                            .background(Color.blue)
                            .foregroundColor(.white)
                            .clipShape(Circle())
                    }
                    .padding()
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
        }
    }
}

这种方案的优势：

• 每个模块路由逻辑独立，互不干扰
• 新增模块只需实现专属Router和目标页面，无需修改主TabView核心结构
• 通用容器封装导航重复逻辑，减少冗余代码

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