如何在SwiftUI NavigationSplitView侧边栏切换时重置Detail视图

直接使用 SwiftUI 内置的onChange修饰符监听侧边栏选中值的变化即可，不需要额外自定义事件捕获逻辑，具体实现如下：

在你的NavigationSplitView层级上添加onChange(of: selectedContent)修饰符，监听到侧边栏选中项变更时，直接将selectedDetail置为nil即可：

var body: some View {
    NavigationSplitView {
        List(Content.allCases, selection: $selectedContent) { content in
            NavigationLink(content.localizedName, value: content)
        }
        .navigationTitle("Sidebar")
    } content: {
        List(
            dataModel.details(in: selectedContent),
            selection: $selectedDetail)
        { detail in
            NavigationLink(detail.name, value: detail)
        }
        .navigationTitle(selectedContent?.localizedName ?? "")
    } detail: {
        MyDetail(recipe: selectedDetail)
    }
    // 新增以下监听逻辑
    .onChange(of: selectedContent) { newValue in
        // 切换侧边栏分类时清空已选中的详情
        selectedDetail = nil
        // 如果需要默认选中新分类下第一条数据，也可以在这里赋值：
        // selectedDetail = dataModel.details(in: newValue).first
    }
}

补充说明 #

• 该实现兼容iOS 16及以上系统版本。如果仅适配iOS 17+，也可以直接在@State声明的selectedContent属性上添加didSet属性观察者实现相同逻辑，写法更简洁。
• 出现该问题的本质是：NavigationSplitView 不会在侧边栏选中项变更时自动重置内容列的选中绑定值，旧的selectedDetail属于上一个侧边栏分类的数据，和新的内容列表数据源不匹配，就会出现详情页残留旧数据的问题。

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