SwiftUI中NavigationView详情视图在iPhone端不显示的正确配置问询

问题根因 #

NavigationView 默认会根据设备屏幕尺寸自动切换交互模式：

• iPad等大屏设备默认启用双栏分栏模式，同时渲染主视图、详情视图
• iPhone等小屏设备默认启用堆叠导航模式，默认仅展示顶层主视图，没有配置跳转入口的情况下无法访问详情视图

适配代码实现 #

iOS 13 - iOS 15 版本（基于NavigationView） #

需要在主视图中添加NavigationLink关联主从跳转逻辑，同时可明确指定分栏样式保证多端行为统一：

struct ContentView: View {
    // 记录选中状态，同步详情视图内容
    @State private var selectedItem: String?
    
    var body: some View {
        NavigationView {
            // 主视图：添加导航跳转关联
            List {
                NavigationLink(
                    tag: "item1",
                    selection: $selectedItem,
                    destination: {
                        Text("第一项详情内容")
                            .navigationTitle("详情")
                    },
                    label: { Text("列表项1") }
                )
                NavigationLink(
                    tag: "item2",
                    selection: $selectedItem,
                    destination: {
                        Text("第二项详情内容")
                            .navigationTitle("详情")
                    },
                    label: { Text("列表项2") }
                )
            }
            .navigationTitle("主视图")
            
            // 未选中状态下的默认详情占位视图
            Text("请选择左侧列表项查看详情")
                .navigationTitle("详情")
        }
        // 指定分栏样式，统一多端适配逻辑
        .navigationViewStyle(.columns)
    }
}

适配后效果：

• iPhone端点击主视图列表项会正常跳转到对应详情页，支持手势返回主视图
• iPad端保持双栏布局，选中左侧主视图项后右侧详情自动同步更新

iOS 16+ 版本（推荐使用NavigationSplitView） #

NavigationView 从iOS 16开始已被官方弃用，新的NavigationSplitView对主从结构的适配更简洁，无需手动配置样式即可自动适配多端：

struct ContentView: View {
    @State private var selectedItem: String?
    
    var body: some View {
        NavigationSplitView {
            // 主视图（侧边栏）
            List(selection: $selectedItem) {
                Text("列表项1").tag("item1")
                Text("列表项2").tag("item2")
            }
            .navigationTitle("主视图")
        } detail: {
            // 详情视图，根据选中状态自动更新
            if let selectedItem = selectedItem {
                Text("\(selectedItem) 的详情内容")
                    .navigationTitle("详情")
            } else {
                Text("请选择左侧列表项查看详情")
                    .navigationTitle("详情")
            }
        }
    }
}

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