当底层模型中的项被移除时，如何移除对应的详情视图？

针对你遇到的「列表项被删除后，其对应的详情视图仍停留在导航栈顶」的问题，可以通过以下几种方案解决：

方案一：用NavigationPath绑定管理导航栈 #

通过绑定NavigationPath对象，直接控制导航栈的内容，当列表项被删除时，主动移除栈中对应的路径元素。

步骤1：在ViewModel中维护导航路径 #

class ItemViewModel: ObservableObject {
    @Published var items: [Item] = []
    @Published var navigationPath = NavigationPath()
    
    // 处理删除逻辑
    func removeItem(_ targetItem: Item) {
        items.removeAll { $0.id == targetItem.id }
        // 检查并移除导航路径中对应item的标识
        if let targetIndex = navigationPath.firstIndex(where: { 
            ($0 as? Item.ID) == targetItem.id 
        }) {
            navigationPath.remove(at: targetIndex)
        }
    }
}

步骤2：修改视图绑定导航路径 #

struct ListView: View {
    @StateObject private var viewModel = ItemViewModel()
    
    var body: some View {
        NavigationStack(path: $viewModel.navigationPath) {
            List {
                ForEach(viewModel.items) { item in
                    NavigationLink(value: item.id) {
                        Text(item.name)
                    }
                }
            }
            .navigationDestination(for: Item.ID.self) { itemId in
                // 仅当item存在时渲染详情页，否则自动弹出
                if let item = viewModel.items.first(where: { $0.id == itemId }) {
                    DetailsView(model: item)
                } else {
                    Text("该项目已被移除")
                        .onAppear {
                            viewModel.navigationPath.removeLast()
                        }
                }
            }
        }
    }
}

方案二：在详情视图中监听item状态自动弹出 #

让详情视图监听列表数据变化，当当前展示的item不在列表中时，主动调用dismiss动作返回。

修改详情视图 #

struct DetailsView: View {
    let model: Item
    @ObservedObject var viewModel: ItemViewModel
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        VStack {
            Text(model.name)
            // 其他详情内容
        }
        .onChange(of: viewModel.items) { updatedItems in
            // 检查当前item是否还存在于列表
            if !updatedItems.contains(where: { $0.id == model.id }) {
                dismiss()
            }
        }
    }
}

主视图中传递ViewModel #

// 主视图的NavigationLink修改为
NavigationLink {
    DetailsView(model: item, viewModel: viewModel)
} label: {
    Text(item.name)
}

方案三：通过选中状态管理导航 #

维护一个「当前选中item」的状态，当该item被删除时，清空选中状态，自动触发详情视图的弹出。

ViewModel中维护选中状态 #

class ItemViewModel: ObservableObject {
    @Published var items: [Item] = []
    @Published var selectedItem: Item?
    
    func removeItem(_ targetItem: Item) {
        items.removeAll { $0.id == targetItem.id }
        // 如果删除的是当前选中的item，清空选中状态
        if selectedItem?.id == targetItem.id {
            selectedItem = nil
        }
    }
}

主视图绑定选中状态 #

struct ListView: View {
    @StateObject private var viewModel = ItemViewModel()
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(viewModel.items) { item in
                    Button(action: {
                        viewModel.selectedItem = item
                    }) {
                        Text(item.name)
                    }
                }
            }
            .navigationDestination(item: $viewModel.selectedItem) { item in
                DetailsView(model: item)
            }
        }
    }
}

方案选择建议 #

• 若导航场景复杂（比如多级导航），优先选方案一，NavigationPath能更灵活地管理整个导航栈；
• 若仅需处理单级详情页的简单场景，方案二或方案三实现成本更低，代码更简洁。

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