如何关闭Sheet并在原视图NavigationStack打开详情页？附初始化错误

一、修复NavigationStack初始化错误 #

错误原因 #

NavigationStack(path: $path)要求path存储可哈希的数据模型，而非View实例（你当前用的CatDetailView是View类型，不符合初始化要求）。

解决方案 #

1. 调整path的类型为你的猫数据模型类型（假设模型名为Cat，对应代码中遍历的cat类型）：

   @State var path: [Cat] = []
   

2. 在NavigationStack中添加navigationDestination，关联数据模型与对应的详情页：

   .navigationDestination(for: Cat.self) { cat in
       CatDetailView(cat: cat)
   }
   

3. 简化原有的NavigationLink，直接绑定数据模型：

   NavigationLink(value: cat) {
       CatCategoryCardView(cat: cat)
           .padding()
   }
   

二、实现Sheet点击结果关闭并跳转原NavigationStack #

修改SearchView中path的绑定类型为数据模型，并通过添加模型到path触发原栈导航：

修改后的完整代码 #

CatCategoriesView代码

struct CatCategoriesView: View {
    
    @StateObject private var vm = CatCategoriesViewModel(service: Webservice())

    @State var showingSearchView = false
    @State var path: [Cat] = [] // 改为数据模型类型
    
    var body: some View {
        NavigationStack(path: $path) {
            ZStack {
                Theme.backgroundColor
                    .ignoresSafeArea()
                
                ScrollView {
                    switch vm.state {
                    case .success(let cats):
                        
                        LazyVStack {
                            ForEach(cats, id: \.id) { cat in
                                NavigationLink(value: cat) {
                                    CatCategoryCardView(cat: cat)
                                        .padding()
                                }
                            }
                        }
                        
                    case .loading:
                        ProgressView()
                        
                    default:
                        EmptyView()
                    }
                }
            }
            .navigationTitle("CatPedia")
            .toolbar {
                Button {
                    showingSearchView = true
                } label: {
                    Label("Search", systemImage: "magnifyingglass")
                }
            }
            // 关联模型与详情页
            .navigationDestination(for: Cat.self) { cat in
                CatDetailView(cat: cat)
            }
        }
        .task {
            await vm.getCatCategories()
        }
        .alert("Error", isPresented: $vm.hasError, presenting: vm.state) { detail in
            
            Button("Retry") {
                Task {
                    await vm.getCatCategories()
                }
            }
        } message: { detail in
            if case let .failed(error) = detail {
                Text(error.localizedDescription)
            }
        }
       
        .sheet(isPresented: $showingSearchView) {
            SearchView(vm: vm, path: $path)
        }
    }
}

SearchView代码

struct SearchView: View {
    let vm: CatCategoriesViewModel
    
    @Environment(\.dismiss) private var dismiss
    @Binding var path: [Cat] // 改为数据模型类型
    
    @State private var searchText = ""
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(vm.filteredCats, id: \.id) { cat in
                    Button(cat.name) {
                        dismiss() // 关闭Sheet
                        path.append(cat) // 添加模型到path，触发原栈导航
                    }
                }
            }
            .navigationTitle("Search")
            .searchable(text: $searchText, prompt: "Find a cat..")
            .onChange(of: searchText, perform: vm.search)
        }
    }
}

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