SwiftUI侧边菜单导航异常：目标视图显示在菜单内而非主界面

核心问题出在导航栈的作用域错误：你把NavigationStack或NavigationLink放在了侧边菜单的视图层级内部，导致点击跳转时，目标视图会嵌套在侧边菜单的容器里，而不是替换主界面的内容。

修复步骤及代码示例 #

1. 调整视图模型，新增菜单控制与导航路径状态

import SwiftUI

class SideMenuViewModel: ObservableObject {
    @Published var isMenuOpen = false // 控制侧边菜单显隐
    @Published var navigationPath = NavigationPath() // 主导航栈路径
    
    // 侧边菜单项数据
    let menuItems: [SideMenuItem] = [
        SideMenuItem(title: "个人资料", destination: .profile),
        SideMenuItem(title: "账户汇总", destination: .accountSummary),
        SideMenuItem(title: "历史记录", destination: .history)
    ]
    
    // 处理菜单项点击：先关菜单，再触发导航
    func selectMenuItem(_ item: SideMenuItem) {
        isMenuOpen = false
        switch item.destination {
        case .profile:
            navigationPath.append(Screen.profile)
        case .accountSummary:
            navigationPath.append(Screen.accountSummary)
        case .history:
            navigationPath.append(Screen.history)
        }
    }
}

// 定义导航目标枚举（必须遵循Hashable）
enum Screen: Hashable {
    case profile, accountSummary, history
}

// 侧边菜单项模型
struct SideMenuItem: Identifiable {
    let id = UUID()
    let title: String
    let destination: Screen
}

2. 重构父视图：主导航栈放在最外层，侧边菜单作为叠加层

struct MainView: View {
    @StateObject private var viewModel = SideMenuViewModel()
    
    var body: some View {
        ZStack(alignment: .leading) {
            // 主界面导航栈：所有跳转都由这个栈处理
            NavigationStack(path: $viewModel.navigationPath) {
                // 主界面首页（示例：打开菜单的按钮）
                Button("打开侧边菜单") {
                    viewModel.isMenuOpen = true
                }
                .navigationDestination(for: Screen.self) { screen in
                    // 根据导航路径匹配目标视图
                    switch screen {
                    case .profile: ProfileView()
                    case .accountSummary: AccountSummaryView()
                    case .history: HistoryView()
                    }
                }
            }
            
            // 侧边菜单：仅在isMenuOpen为true时显示
            if viewModel.isMenuOpen {
                SideMenuView(viewModel: viewModel)
                    .transition(.move(edge: .leading))
                    .animation(.easeInOut, value: viewModel.isMenuOpen)
            }
            
            // 半透明遮罩：点击关闭菜单
            if viewModel.isMenuOpen {
                Color.black.opacity(0.5)
                    .ignoresSafeArea()
                    .onTapGesture { viewModel.isMenuOpen = false }
            }
        }
    }
}

3. 修改侧边菜单视图：用普通按钮替代NavigationLink

struct SideMenuView: View {
    @ObservedObject var viewModel: SideMenuViewModel
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            // 菜单头部示例
            Text("我的菜单")
                .font(.title)
                .padding()
            
            Divider()
            
            // 菜单项列表
            List(viewModel.menuItems) { item in
                Button(action: {
                    viewModel.selectMenuItem(item)
                }) {
                    HStack {
                        Text(item.title)
                        Spacer()
                    }
                    .padding(.vertical, 8)
                }
            }
            .listStyle(.plain)
            
            Spacer()
        }
        .frame(width: 280)
        .background(Color.white)
        .ignoresSafeArea(.all, edges: .vertical)
    }
}

关键修改点说明 #

• 导航栈移到主视图外层：让主导航栈控制整个应用的页面跳转，侧边菜单仅作为交互入口，不承担导航功能。
• 菜单与导航解耦：点击菜单项时，先通过视图模型关闭侧边菜单，再更新主导航栈的路径，实现类似Twitter的跳转效果。
• 添加遮罩交互：提升用户体验，点击遮罩可快速关闭菜单。

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