iPadOS中导航至视图深层后仍启用Sidebar的实现方案

问题根源 #

1. 切换Sidebar选项时，未重置NavigationStack的导航路径，导致深层页面仍处于活跃状态，拦截了Sidebar的切换响应
2. ThirdPage中错误初始化了新的AppState实例，破坏了状态的全局一致性
3. 使用navigationDestination(isPresented:)的方式管理深层导航，无法与Sidebar的状态切换联动

解决方案 #

1. 监听selectedItem的变化，触发时清空导航路径，重置导航状态
2. 全局共享同一个AppState实例，所有子视图通过参数传递获取状态对象
3. 使用NavigationPath统一管理导航栈，替代isPresented的方式，实现更灵活的导航控制

修改后的完整代码 #

scrapAppApp.swift #

import SwiftUI

@main
struct scrapAppApp: App {
    var body: some Scene {
        WindowGroup {
            MenuView()
        }
    }
}

funcs.swift #

class AppState: ObservableObject {
    @Published var selectedItem: SidebarItem?
    @Published var path = NavigationPath()
}

MenuView.swift #

enum SidebarItem: String, Identifiable, CaseIterable {
    case initialScreen = "Initial Screen"
    case arrivalWx = "Wx On Arrival"
    case legal = "Legal"

    var id: String { self.rawValue }

    var iconName: String {
        switch self {
        case .initialScreen:
            return "house"
        case .arrivalWx:
            return "cloud.sun"
        case .legal:
            return "doc.text"
        }
    }
}

struct MenuView: View {
    @StateObject private var app = AppState()
    
    var body: some View {
        NavigationSplitView {
            List(SidebarItem.allCases, id: \.self, selection: $app.selectedItem) { item in
                NavigationLink(value: item) {
                    Label(item.rawValue, systemImage: item.iconName)
                }
            }
            .listStyle(SidebarListStyle())
            .navigationTitle("Menu")
        } detail: {
            NavigationStack(path: $app.path) {
                if let selectedItem = app.selectedItem {
                    switch selectedItem {
                    case .initialScreen:
                        FirstPage()
                    case .arrivalWx:
                        SecondPage(app: app)
                    case .legal:
                        FourthPage(app: app)
                    }
                } else {
                    Text("Select an item")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                }
                // 注册深层页面的导航目标
                .navigationDestination(for: String.self) { destination in
                    if destination == "thirdPage" {
                        ThirdPage(app: app)
                    }
                }
            }
            // 切换Sidebar选项时清空导航路径
            .onChange(of: app.selectedItem) { _ in
                app.path.removeLast(app.path.count)
            }
        }
    }
}

FirstPage.swift #

struct FirstPage: View {
    var body: some View {
        Text("INITIAL SCREEN")
    }
}

SecondPage.swift #

struct SecondPage: View {
    @ObservedObject var app: AppState
    
    var body: some View {
        VStack {
            Text("WX on ARRIVAL")
            Button("Go settings") {
                app.path.append("thirdPage")
            }
        }
    }
}

ThirdPage.swift #

struct ThirdPage: View {
    @ObservedObject var app: AppState
    
    var body: some View {
        Text("Second Layer")
    }
}

FourthPage.swift #

struct FourthPage: View {
    @ObservedObject var app: AppState
    
    var body: some View {
        Button("LEGAL") {
        }
    }
}

关键修改点说明 #

• 移除了AppState中冗余的destination和readyToNavigate属性，仅保留核心的selectedItem和path
• 在MenuView中添加onChange(of: app.selectedItem)回调，切换Sidebar时清空整个导航路径，确保新选中的页面从根层级展示
• 将SecondPage中的导航方式改为app.path.append("thirdPage")，通过NavigationPath管理栈，同时在NavigationStack中注册对应的navigationDestination
• 修正ThirdPage的初始化方式，通过参数接收全局的AppState实例，保证状态统一

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