iPad横屏时NavigationStack无法显示主从视图的问题排查

在iPad横屏状态下，使用NavigationView可以正常展示主从视图，但换成NavigationStack后，视图会像iPhone一样折叠显示。请问遗漏了什么配置？或者有其他实现主从视图的方式吗？

附现有代码：

struct OwnersView: View {
    @StateObject var vm: OwnersVM
    
    var body: some View {
        NavigationView {
            TabView {
                ForEach(vm.owners) { owner in
                    VStack {
                        Spacer()
                        
                        Image(systemName: "person.circle")
                            .resizable()
                            .frame(width: 200, height: 200)
                        
                        Text(owner.name)
                        
                        Spacer()
                        HStack {
                            NavigationLink(destination: Text("\(owner.name) gold piece list")) {
                                Image("jewelry-filled")
                            }
                            
                            NavigationLink(destination: Text("\(owner.name) cash list")) {
                                Image("cash-filled")
                            }
                            
                            NavigationLink(destination: Text("\(owner.name) some other list")) {
                                Image("zakah-filled")
                                
                            }
                        }
                        Spacer()
                        Spacer()
                    }
                    
                    
                }
            }
            .navigationTitle("Owners")
            .tabViewStyle(.page(indexDisplayMode: .always))
            .indexViewStyle(.page(backgroundDisplayMode: .always))
        }
    }
}

核心原因 #

NavigationView在iPad横屏时会自动启用主从（Split View）布局，但NavigationStack是iOS 16+推出的新导航组件，它本身不具备自动分栏的特性，需要配合NavigationSplitView来实现iPad上的主从视图结构。

实现方式 #

使用NavigationSplitView替代原有的NavigationView，将页面拆分为侧边栏（主视图）和详情视图两部分，同时用NavigationStack管理详情页的导航逻辑：

修改后的代码示例：

struct OwnersView: View {
    @StateObject var vm: OwnersVM
    // 记录当前选中的详情页目标
    @State private var selectedDestination: String?
    
    var body: some View {
        NavigationSplitView {
            // 侧边栏：保留原有的TabView结构
            TabView {
                ForEach(vm.owners) { owner in
                    VStack {
                        Spacer()
                        
                        Image(systemName: "person.circle")
                            .resizable()
                            .frame(width: 200, height: 200)
                        
                        Text(owner.name)
                        
                        Spacer()
                        HStack {
                            Button(action: { selectedDestination = "\(owner.name) gold piece list" }) {
                                Image("jewelry-filled")
                            }
                            
                            Button(action: { selectedDestination = "\(owner.name) cash list" }) {
                                Image("cash-filled")
                            }
                            
                            Button(action: { selectedDestination = "\(owner.name) some other list" }) {
                                Image("zakah-filled")
                            }
                        }
                        Spacer()
                        Spacer()
                    }
                }
            }
            .navigationTitle("Owners")
            .tabViewStyle(.page(indexDisplayMode: .always))
            .indexViewStyle(.page(backgroundDisplayMode: .always))
        } detail: {
            // 详情视图：用NavigationStack管理导航
            NavigationStack {
                // 默认占位视图
                Text("Select an option")
                    .navigationTitle("Details")
                // 根据选中目标跳转对应视图
                .navigationDestination(item: $selectedDestination) { destination in
                    Text(destination)
                        .navigationTitle(destination)
                }
            }
        }
    }
}

代码说明 #

• NavigationSplitView：专门用于多设备适配的主从视图组件，在iPad横屏时自动分栏，竖屏或iPhone上会自动折叠为堆叠导航
• selectedDestination：通过状态变量记录用户选中的详情页目标，替代原NavigationLink的触发逻辑
• navigationDestination：配合NavigationStack使用，根据状态变量的变化展示对应详情视图

替代实现（保留NavigationLink） #

如果想保留NavigationLink的使用方式，可将详情视图的NavigationStack绑定到导航路径：

struct OwnersView: View {
    @StateObject var vm: OwnersVM
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationSplitView {
            TabView {
                ForEach(vm.owners) { owner in
                    VStack {
                        // 原有视图内容
                        Spacer()
                        Image(systemName: "person.circle")
                            .resizable()
                            .frame(width: 200, height: 200)
                        Text(owner.name)
                        Spacer()
                        
                        HStack {
                            NavigationLink(value: "\(owner.name) gold piece list") {
                                Image("jewelry-filled")
                            }
                            
                            NavigationLink(value: "\(owner.name) cash list") {
                                Image("cash-filled")
                            }
                            
                            NavigationLink(value: "\(owner.name) some other list") {
                                Image("zakah-filled")
                            }
                        }
                        Spacer()
                        Spacer()
                    }
                }
            }
            .navigationTitle("Owners")
            .tabViewStyle(.page(indexDisplayMode: .always))
            .indexViewStyle(.page(backgroundDisplayMode: .always))
        } detail: {
            NavigationStack(path: $path) {
                Text("Select an option")
                    .navigationTitle("Details")
                .navigationDestination(for: String.self) { destination in
                    Text(destination)
                        .navigationTitle(destination)
                }
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者M.Serag