SwiftUI实现列表项跳转至不同页面的方法及逻辑解析

核心思路 #

要实现不同列表项跳转不同页面，关键是让每个Category数据与对应的目标视图绑定，再根据绑定信息动态生成跳转目标，而非硬编码固定视图。

步骤1：修改Category数据模型，添加跳转标识 #

给Category结构体新增属性标记对应目标页面，用枚举定义所有可能的页面类型，既规范又便于后续扩展：

import Foundation

// 定义所有分类对应的跳转页面类型
enum CategoryDestination: Identifiable {
    case basicKata
    case advancedKata
    
    var id: Self { self } // 遵循Identifiable协议，适配SwiftUI列表要求
}

struct Category: Identifiable {
    let id = UUID()
    let name: String
    let description: String
    let image: String
    let destination: CategoryDestination // 新增：关联目标页面
}

extension Category{
    static let list: [Category] = [
        Category(name: "Kata", description: "Category de Kata basique", image: "colorbelt", destination: .basicKata),
        Category(name: "Kata Superieur", description: "Category de Kata superieur", image: "blackbelt", destination: .advancedKata),
    ]
}

步骤2：修改列表视图，动态生成跳转目标 #

替换原来硬编码的KarateShotokanView，根据当前Category的destination属性返回对应视图，同时简化NavigationLink写法（无需透明overlay，直接包裹列表项内容）：

import SwiftUI

struct Categorykata: View {
    
    var body: some View {
        // iOS 16+推荐用NavigationStack替代NavigationView（NavigationView已过时）
        NavigationStack {
            List(Category.list) { category in
                NavigationLink {
                    // 根据分类的目标标识，返回对应视图
                    switch category.destination {
                    case .basicKata:
                        KarateShotokanView() // 基础Kata页面
                    case .advancedKata:
                        KarateAdvancedView() // 高级Kata页面（需自行创建）
                    }
                } label: {
                    CatKataView(category: category)
                }
            }
            .listStyle(PlainListStyle())
            .navigationTitle("Select your Category")
        }
        // 若兼容iOS 15及以下，保留NavigationView：
        // NavigationView { ... }
    }
}

// 示例：创建高级Kata目标视图
struct KarateAdvancedView: View {
    var body: some View {
        Text("Kata Supérieur Page")
            .navigationTitle("Kata Supérieur")
    }
}

实现逻辑解析 #

1. 数据与视图解耦：通过枚举CategoryDestination将分类数据和跳转视图关联，后续新增分类时，只需在枚举中添加新case并给对应Category赋值，无需修改列表视图逻辑。
2. 动态视图渲染：NavigationLink的destination闭包会根据当前循环的category对象动态返回目标视图，实现“一个列表项对应一个跳转页面”的需求。
3. SwiftUI规范写法：直接用NavigationLink包裹CatKataView，替代原来的overlay+透明NavigationLink技巧，代码更清晰，符合SwiftUI导航设计思路。

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