SwiftUI：如何在iPhone上程序化控制NavigationSplitView列导航？

我之前也碰到过类似的问题——在iPad上NavigationSplitView的三列布局顺风顺水，但到了iPhone上，用LazyVGrid配合columnVisibility绑定就是触发不了导航。下面给你几个可行的解决方案，应该能解决你的问题：

首先得搞清楚iPhone上NavigationSplitView的特殊行为：它默认把三列转换成堆叠的导航栈，不像iPad那样并排显示。所以单纯设置columnVisibility有时候不够，得和选中项的状态联动起来。

方案一：联动选中状态与Column Visibility #

核心思路是，点击LazyVGrid的项时，不仅更新ViewModel里的选中项，还要根据设备类型设置对应的columnVisibility，同时确保ViewModel的属性是可观察的。

先看ViewModel的实现：

class LayoutViewModel: ObservableObject {
    @Published var firstColumnItems: [FirstItem] = (1...15).map { FirstItem(id: $0, title: "分类\($0)") }
    @Published var selectedFirstItem: FirstItem?
    @Published var selectedSecondItem: SecondItem?
    @Published var columnVisibility: NavigationSplitViewVisibility = .automatic
    
    // 根据选中的第一列项返回第二列数据
    func getSecondColumnItems(for item: FirstItem) -> [SecondItem] {
        (1...8).map { SecondItem(id: item.id * 100 + $0, title: "\(item.title) - 子项\($0)") }
    }
}

// 数据模型
struct FirstItem: Identifiable {
    let id: Int
    let title: String
}

struct SecondItem: Identifiable {
    let id: Int
    let title: String
}

然后是主视图的实现：

struct MainView: View {
    @StateObject private var vm = LayoutViewModel()
    
    var body: some View {
        NavigationSplitView(columnVisibility: $vm.columnVisibility) {
            // 第一列：LazyVGrid
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 120), spacing: 12)], spacing: 12) {
                ForEach(vm.firstColumnItems) { item in
                    Text(item.title)
                        .padding()
                        .background(vm.selectedFirstItem == item ? Color.blue.opacity(0.3) : Color.gray.opacity(0.2))
                        .cornerRadius(8)
                        .onTapGesture {
                            // 1. 更新选中项
                            vm.selectedFirstItem = item
                            vm.selectedSecondItem = nil // 重置第二列选中状态
                            
                            // 2. 针对iPhone设置列可见性
                            if UIDevice.current.userInterfaceIdiom == .phone {
                                // 跳转到第二列（在iPhone上是导航栈push）
                                vm.columnVisibility = .doubleColumn
                            }
                        }
                }
            }
            .padding()
            .navigationTitle("分类")
        } content: {
            // 第二列：滚动的VStack内容
            if let selectedFirst = vm.selectedFirstItem {
                ScrollView {
                    VStack(spacing: 10) {
                        ForEach(vm.getSecondColumnItems(for: selectedFirst)) { item in
                            Text(item.title)
                                .padding()
                                .background(vm.selectedSecondItem == item ? Color.blue.opacity(0.3) : Color.gray.opacity(0.2))
                                .cornerRadius(8)
                                .onTapGesture {
                                    vm.selectedSecondItem = item
                                    
                                    if UIDevice.current.userInterfaceIdiom == .phone {
                                        // 跳转到详情列（iPhone上push到详情）
                                        vm.columnVisibility = .detailOnly
                                    }
                                }
                        }
                    }
                    .padding()
                }
                .navigationTitle(selectedFirst.title)
            } else {
                Text("请选择一个分类")
                    .navigationTitle("子项")
            }
        } detail: {
            // 详情列
            if let selectedSecond = vm.selectedSecondItem {
                VStack(spacing: 20) {
                    Text("详情内容")
                        .font(.largeTitle)
                    Text(selectedSecond.title)
                        .font(.title)
                }
                .navigationTitle("详情")
            } else {
                Text("请选择一个子项查看详情")
                    .navigationTitle("详情")
            }
        }
        .navigationSplitViewStyle(.balanced)
    }
}

关键注意点 #

1. 可观察属性必须正确设置：ViewModel里的columnVisibility、selectedFirstItem、selectedSecondItem都要用@Published修饰，视图要用@StateObject持有ViewModel，确保状态变化能同步到视图。
2. 针对设备类型调整逻辑：iPhone上设置.doubleColumn会触发导航栈push到第二列，设置.detailOnly会push到详情列；iPad上这些设置会控制列的显示/隐藏，不影响导航栈。
3. 重置选中状态：点击第一列项时，记得重置第二列的选中状态，避免详情列显示旧数据。

为什么List能工作而LazyVGrid不行？ #

SwiftUI对List在NavigationSplitView的侧边栏有特殊优化：当你用List(selection: $selectedItem)时，它会自动关联NavigationSplitView的导航逻辑，自动处理iPhone上的栈跳转。而LazyVGrid没有这种默认绑定，所以需要我们手动通过onTapGesture+columnVisibility来触发导航。

备选方案：用隐藏的NavigationLink避免冗余 #

如果你不想依赖columnVisibility，也可以用隐藏的NavigationLink来触发导航，这样能更精准控制导航栈：

在第一列的LazyVGrid后面加一个隐藏的NavigationLink：

LazyVGrid(...) {
    // 你的网格项
}
.background(
    NavigationLink(
        destination: SecondColumnView(selectedFirstItem: $vm.selectedFirstItem, selectedSecondItem: $vm.selectedSecondItem, vm: vm),
        isActive: $vm.shouldNavigateToSecondColumn
    ) {
        EmptyView()
    }
)

然后在onTapGesture里设置：

vm.selectedFirstItem = item
vm.shouldNavigateToSecondColumn = true

不过这种方法需要你把第二列的视图单独抽出来，代码量会稍微多一点，但好处是对导航栈的控制更直接。

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