SwiftUI中使用汉堡菜单导致NavigationLink失效问题求助

问题场景 #

开发SwiftUI应用时，包含About、Request、Supported Apps三个页面。最初将NavigationLink放在顶部HStack中时，页面跳转完全正常，但布局不够美观。改用汉堡菜单（Menu组件）隐藏导航项后，点击菜单内的NavigationLink无法触发页面跳转。

可运行代码（HStack布局） #

var body: some View {
    NavigationView {
        VStack {}
        .navigationBarTitle("", displayMode: .inline)
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                HStack {
                    NavigationLink(destination: About()) {
                        Text("About")
                    }
                    NavigationLink(destination: AppList()) {
                        Text("Supported Apps")
                    }
                    NavigationLink(destination: Request()) {
                        Text("Request")
                    }
                }
            }
        }
    }
    .sheet(isPresented: $showingShareSheet) {
        ActivityView(activityItems: [self.cleanedURL])
    }
    .sheet(isPresented: $showBuyMeACoffeePopup) {
        BuyMeACoffee (isPresented: $showBuyMeACoffeePopup)
    }
    .onAppear {
        Task {
            globalSpecialHosts = await fetchSpecialHosts()
        }
    }
}

无法运行代码（Menu布局） #

var body: some View {
    NavigationView {
        VStack {}
        .navigationBarTitle("", displayMode: .inline)
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Menu {
                    NavigationLink(destination: About()) {
                        Text("About")
                    }
                    NavigationLink(destination: AppList()) {
                        Text("Supported Apps")
                    }
                    NavigationLink(destination: Request()) {
                        Text("Request")
                    }
                } label: {
                    Label("Menu", systemImage: "line.horizontal.3")
                }
            }
        }
    }
    .sheet(isPresented: $showingShareSheet) {
        ActivityView(activityItems: [self.cleanedURL])
    }
    .sheet(isPresented: $showBuyMeACoffeePopup) {
        BuyMeACoffee(isPresented: $showBuyMeACoffeePopup)
    }
    .onAppear {
        Task {
            globalSpecialHosts = await fetchSpecialHosts()
        }
    }
}

解决思路 #

问题根源在于：Menu是弹出式上下文容器，内部的NavigationLink不在NavigationView的直接导航上下文范围内，因此无法被正确识别并触发跳转。以下是两种可行的修复方案：

方案1：使用绑定状态控制跳转（兼容iOS13+） #

1. 为每个页面定义@State变量控制跳转激活状态：

@State private var showAbout = false
@State private var showSupportedApps = false
@State private var showRequest = false

2. 将Menu内的NavigationLink替换为Button，点击时切换对应状态：

Menu {
    Button("About") {
        showAbout = true
    }
    Button("Supported Apps") {
        showSupportedApps = true
    }
    Button("Request") {
        showRequest = true
    }
} label: {
    Label("Menu", systemImage: "line.horizontal.3")
}

3. 在NavigationView内部添加绑定状态的NavigationLink（用EmptyView隐藏链接本身）：

NavigationView {
    VStack {}
    .navigationBarTitle("", displayMode: .inline)
    .toolbar {
        // 上述Menu代码
    }
    // 隐藏的跳转触发链接
    NavigationLink(destination: About(), isActive: $showAbout) { EmptyView() }
    NavigationLink(destination: AppList(), isActive: $showSupportedApps) { EmptyView() }
    NavigationLink(destination: Request(), isActive: $showRequest) { EmptyView() }
}

方案2：使用NavigationStack + navigationDestination（iOS16+推荐） #

如果应用只需要兼容iOS16及以上版本，推荐使用更现代的导航API：

1. 定义枚举标识目标页面，并用@State变量存储选中项：

enum AppDestination {
    case about, appList, request
}

@State private var selectedDestination: AppDestination?

2. Menu内用Button设置选中的目标页面：

Menu {
    Button("About") {
        selectedDestination = .about
    }
    Button("Supported Apps") {
        selectedDestination = .appList
    }
    Button("Request") {
        selectedDestination = .request
    }
} label: {
    Label("Menu", systemImage: "line.horizontal.3")
}

3. 替换NavigationView为NavigationStack，并添加navigationDestination处理跳转：

NavigationStack {
    VStack {}
    .navigationBarTitle("", displayMode: .inline)
    .toolbar {
        // 上述Menu代码
    }
    .navigationDestination(item: $selectedDestination) { destination in
        switch destination {
        case .about:
            About()
        case .appList:
            AppList()
        case .request:
            Request()
        }
    }
}

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