SwiftUI中NavigationSplitView：选中项后切换回detailOnly状态

要实现用户选中侧边栏项目后自动收起侧边栏（切回NavigationSplitViewVisibility.detailOnly），只需在选中项目的时机更新绑定的showDetailsOnly状态即可。以下是两种可行的实现方式：

方式一：在列表项点击事件中直接修改状态 #

给侧边栏的每个列表项添加点击回调，选中时直接将showDetailsOnly设为.detailOnly：

struct ContentView: View {
    @State private var showDetailsOnly = NavigationSplitViewVisibility.detailOnly
    @State private var selectedItem: String? // 根据你的实际项目类型替换类型

    var body: some View {
        NavigationSplitView(columnVisibility: $showDetailsOnly) {
            List(selection: $selectedItem) {
                // 示例列表项，替换为你的实际数据
                ForEach(["项目1", "项目2", "项目3"], id: \.self) { item in
                    Text(item)
                        .onTapGesture {
                            selectedItem = item
                            showDetailsOnly = .detailOnly // 选中后自动收起侧边栏
                        }
                }
            }
        } detail: {
            VStack {
                if let selectedItem {
                    Text("当前选中：\(selectedItem)")
                } else {
                    Text("请选择一个项目")
                }
            }
        }
    }
}

方式二：用onChange监听选中项变化 #

如果你的列表使用了selection绑定，可以通过onChange监听选中项的变化，当选中项更新时自动收起侧边栏：

struct ContentView: View {
    @State private var showDetailsOnly = NavigationSplitViewVisibility.detailOnly
    @State private var selectedItem: String?

    var body: some View {
        NavigationSplitView(columnVisibility: $showDetailsOnly) {
            List(selection: $selectedItem) {
                ForEach(["项目1", "项目2", "项目3"], id: \.self) { item in
                    Text(item)
                }
            }
        } detail: {
            VStack {
                if let selectedItem {
                    Text("当前选中：\(selectedItem)")
                } else {
                    Text("请选择一个项目")
                }
            }
        }
        .onChange(of: selectedItem) { oldValue, newValue in
            if newValue != nil {
                showDetailsOnly = .detailOnly // 选中项目后自动收起侧边栏
            }
        }
    }
}

关键说明 #

两种方式的核心逻辑一致：在用户选中项目的时刻，修改columnVisibility绑定的状态变量，让NavigationSplitView自动切换到仅显示详情的模式。如果你的侧边栏使用自定义数据类型，只需将示例中的String替换为你的实际类型即可。

内容的提问来源于stack exchange，提问作者Alex S.