iOS中NavigationLink列表项选中后自动返回上一页的实现方案

要实现用户选中列表元素后无需手动点击返回，直接回到上一页的需求，你可以通过以下两种简洁方式实现：

方法一：利用@Environment(\.dismiss)手动关闭页面 #

将嵌套的列表拆分为独立子视图，监听选中项的变化，一旦用户选择新条目，立即触发页面关闭逻辑，同时可重置搜索文本避免残留。

修改后的完整代码：

import SwiftUI

struct TheItem: Identifiable {
    let id = UUID()
    let name: String
}

class SomeModel: ObservableObject {
    
    @Published var selectedId: UUID?
    @Published var searchText: String = ""

    var items: [TheItem] = [
        TheItem(name:"Item 1"),
        TheItem(name:"Item 2"),
        TheItem(name:"Item 3"),
        TheItem(name:"Item N")
    ]
    
    var filteredItems: [TheItem] {
        guard !searchText.isEmpty else { return items }
        return items.filter { item in
            item.name.lowercased().contains(searchText.lowercased())
        }
    }
    
    var selectedItemName: String {
        filteredItems.first(where: {$0.id == selectedId})?.name ?? "-"
    }
    
    init () {
        selectedId = items.first?.id
    }
}

struct TestNavigationLinkBackView: View {
    
    @EnvironmentObject private var model: SomeModel
    
    var body: some View {
        NavigationStack {
            NavigationLink(model.selectedItemName) {
                ItemSelectionView()
            }
        }
    }
}

// 独立子视图处理选择与返回逻辑
struct ItemSelectionView: View {
    @EnvironmentObject private var model: SomeModel
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        List {
            Picker("Item", selection: $model.selectedId) {
                ForEach(model.filteredItems) { item in
                    Text(item.name).tag(item.id)
                }
            }
            .onChange(of: model.selectedId) { _ in
                // 选中后清空搜索文本并返回上一页
                model.searchText = ""
                dismiss()
            }
        }
        .searchable(text: $model.searchText, placement: .navigationBarDrawer(displayMode: .always))
        .pickerStyle(.inline)
    }
}

#Preview {
    TestNavigationLinkBackView()
        .environmentObject(SomeModel())
}

关键修改点： #

• 将列表部分拆分为ItemSelectionView子视图，代码结构更清晰
• 添加@Environment(\.dismiss)获取页面关闭权限
• 给Picker的选中绑定添加onChange监听，触发返回并重置搜索文本

方法二：使用NavigationStack路径绑定（适配复杂导航场景） #

通过绑定NavigationStack的路径数组，手动控制导航栈的变化，选中项后移除当前路径实现自动返回。

核心代码片段：

struct TestNavigationLinkBackView: View {
    
    @EnvironmentObject private var model: SomeModel
    @State private var navigationPath = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $navigationPath) {
            Button(model.selectedItemName) {
                navigationPath.append("itemSelection")
            }
            .navigationDestination(for: String.self) { destination in
                if destination == "itemSelection" {
                    List {
                        Picker("Item", selection: $model.selectedId) {
                            ForEach(model.filteredItems) { item in
                                Text(item.name).tag(item.id)
                            }
                        }
                        .onChange(of: model.selectedId) { _ in
                            model.searchText = ""
                            navigationPath.removeLast()
                        }
                    }
                    .searchable(text: $model.searchText, placement: .navigationBarDrawer(displayMode: .always))
                    .pickerStyle(.inline)
                }
            }
        }
    }
}

关键说明： #

• 用NavigationStack(path: $navigationPath)绑定导航路径，替代默认的NavigationLink自动导航
• 选中项后调用navigationPath.removeLast()移除当前页面路径，自动返回上一页

两种方法均能满足需求：第一种简洁直观，适合简单页面；第二种更灵活，适配多页面嵌套的复杂导航场景。

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