Swift应用中如何通过Navigation destination为列表项配置不同跳转视图？

步骤1：定义标识视图类型的模型/枚举 #

首先需要一个能区分不同列表项对应视图的标识，比如用枚举定义所有视图类型，同时让模型包含这个标识：

// 定义视图类型枚举，必须遵循Hashable协议
enum ItemType: Hashable {
    case profile
    case settings
    case notifications
}

// 列表项模型，同样遵循Hashable
struct AppItem: Hashable {
    let id: UUID
    let title: String
    let type: ItemType
}

步骤2：主视图中实现NavigationStack与跳转逻辑 #

在主视图的NavigationStack里，通过NavigationLink传递视图类型，再用navigationDestination配合switch语句匹配对应视图：

struct MainView: View {
    // 模拟列表数据
    let items: [AppItem] = [
        AppItem(id: UUID(), title: "个人资料", type: .profile),
        AppItem(id: UUID(), title: "设置", type: .settings),
        AppItem(id: UUID(), title: "通知", type: .notifications)
    ]
    
    var body: some View {
        NavigationStack {
            List(items) { item in
                // 通过value传递视图类型
                NavigationLink(value: item.type) {
                    Text(item.title)
                }
            }
            .navigationTitle("示例应用")
            
            // 针对ItemType类型匹配目标视图
            .navigationDestination(for: ItemType.self) { type in
                switch type {
                case .profile:
                    ProfileView() // 跳转到个人资料视图
                case .settings:
                    SettingsView() // 跳转到设置视图
                case .notifications:
                    NotificationsView() // 跳转到通知视图
                }
            }
        }
    }
}

步骤3：独立视图示例 #

你的独立视图可以直接使用，比如：

// 个人资料视图
struct ProfileView: View {
    var body: some View {
        Text("个人资料页面")
            .navigationTitle("个人资料")
    }
}

// 设置视图
struct SettingsView: View {
    var body: some View {
        Text("设置页面")
            .navigationTitle("设置")
    }
}

// 通知视图
struct NotificationsView: View {
    var body: some View {
        Text("通知页面")
            .navigationTitle("通知")
    }
}

另一种实现方式：直接传递列表项模型 #

如果需要在目标视图中使用列表项的其他数据，可以直接传递AppItem模型，再在navigationDestination里根据模型的type判断：

NavigationStack {
    List(items) { item in
        NavigationLink(value: item) {
            Text(item.title)
        }
    }
    .navigationTitle("示例应用")
    .navigationDestination(for: AppItem.self) { item in
        switch item.type {
        case .profile:
            ProfileView()
        case .settings:
            SettingsView()
        case .notifications:
            NotificationsView()
        }
    }
}

关键注意点：

• 传递给NavigationLink(value:)的类型必须遵循Hashable协议
• navigationDestination(for:)的参数要和NavigationLink传递的value类型一致
• switch语句可以清晰映射每个列表项对应的独立视图

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