NavigationLink导致NavigationSplitView详情页停止响应ObservableObject更新的原因及解决方法

我完全懂你遇到的这个坑！其实问题的核心在于NavigationLink点击后会在详情页的导航栈里压入一个新的视图，而原来通过NavigationSplitView的detail:闭包渲染的那个绑定modelData.value的详情页，会被这个新push的视图盖在下面。之后你点击Switch按钮修改modelData.value时，原来的那个详情页确实在更新，但你根本看不到它——因为当前显示的是导航栈顶部的、你通过NavigationLink手动传入固定值的detailPage。

具体拆解问题发生的过程 #

• 初始状态下，NavigationSplitView的详情区域显示的是detailPage(v: modelData.value)，这个视图会跟着modelData.value的变化自动刷新，所以你点Switch按钮时，侧边栏和详情页会一起变。
• 当你点击NavigationLink("Detail Page 1")时，SwiftUI会在详情的导航栈里添加一个新的detailPage(v:1)，这个视图的v是固定的1，和modelData没有任何绑定关系，而且它现在是栈顶，所以你看到的是它。
• 这时候再点Switch按钮，modelData.value变化只会更新原来的那个在栈底的详情页，栈顶的这个手动push的页面完全不受影响，所以你会觉得“详情页不响应了”。

解决方法（推荐按优先级选择） #

方法1：用selection绑定管理详情页（最符合NavigationSplitView的设计）

NavigationSplitView本身支持通过selection绑定来控制详情页内容，不需要手动用NavigationLink push。我们可以把modelData.value作为选中项，让详情页自动根据选中值变化，同时侧边栏的NavigationLink也绑定到这个选中值，这样就不会出现栈堆积的问题。

修改后的完整代码：

import SwiftUI

final class ModelData: ObservableObject {
    @Published var selectedValue: Int = 1 // 用选中值直接控制详情页
}

struct ContentView: View {
    @EnvironmentObject var modelData: ModelData
    
    var body: some View {
        // 绑定selection到modelData的选中值
        NavigationSplitView(selection: $modelData.selectedValue) {
            SidebarView()
        } detail: {
            DetailPage(v: modelData.selectedValue)
        }
    }
}

struct SidebarView: View{
    @EnvironmentObject var modelData: ModelData
    
    var body: some View {
        Text("Sidebar version")
        Text("\(modelData.selectedValue)").font(.largeTitle)
        
        Text("Switching changes sidebar and detail pages").font(.caption)
        Button("Switch", action: {
            modelData.selectedValue = modelData.selectedValue == 1 ? 2 : 1
        })
        
        Text("点击NavigationLink会同步选中状态").font(.caption)
        // 用绑定selection的NavigationLink，不会push新视图，而是更新选中值
        NavigationLink(value: 1) {
            Text("Detail Page 1")
        }
        NavigationLink(value: 2) {
            Text("Detail Page 2")
        }
    }
}

struct DetailPage: View{
    @EnvironmentObject var modelData: ModelData
    var v: Int
    
    var body: some View {
        Text("Detail Page")
        Text("\(v)").font(.largeTitle)
            .onChange(of: v) { newValue in
                modelData.selectedValue = newValue
            }
    }
}

方法2：让手动push的详情页也响应ModelData的变化

如果你确实需要手动push详情页（比如有更复杂的导航需求），那要保证push的视图也绑定modelData，而不是传入固定值。比如：

// 修改侧边栏的NavigationLink，让目标视图绑定modelData
NavigationLink("Detail Page 1", destination: DetailPage(v: modelData.value))

// 或者更彻底，让DetailPage直接读取modelData的value，不用传参
struct DetailPage: View{
    @EnvironmentObject var modelData: ModelData
    
    var body: some View {
        Text("Detail Page")
        Text("\(modelData.value)").font(.largeTitle)
            .onChange(of: modelData.value) { newValue in
                // 这里可以添加自定义逻辑
            }
    }
}
// 此时NavigationLink直接写：
NavigationLink("Detail Page 1", destination: DetailPage())

这样即使push了新的DetailPage，它的内容也是绑定modelData.value的，点击Switch按钮时也会跟着更新。

方法3：管理详情页的导航栈

如果需要保留导航栈的返回功能，可以在详情页用NavigationStack并绑定路径，把路径存在ModelData里，手动控制栈的内容：

final class ModelData: ObservableObject {
    @Published var value: Int = 1
    @Published var detailPath: [Int] = [] // 管理详情页的导航路径
}

struct ContentView: View {
    @EnvironmentObject var modelData: ModelData
    
    var body: some View {
        NavigationSplitView{
            SidebarView()
        }detail:{
            NavigationStack(path: $modelData.detailPath) {
                DetailPage(v: modelData.value)
                    .navigationDestination(for: Int.self) { value in
                        DetailPage(v: value)
                    }
            }
        }
    }
}

// 侧边栏的NavigationLink改成用navigationDestination的方式
struct SidebarView: View{
    @EnvironmentObject var modelData: ModelData
    
    var body: some View {
        // ... 其他内容不变
        NavigationLink(value: 1) {
            Text("Detail Page 1")
        }
        NavigationLink(value: 2) {
            Text("Detail Page 2")
        }
    }
}

内容来源于stack exchange