如何通过SwiftUI List+NavigationLink导航新视图？多项目导航及行点击问题咨询

1. 实现List搭配NavigationLink的导航功能 #

有两种主流实现方式，适配不同iOS版本：

方式一：传统嵌套NavigationLink（兼容iOS13+） #

直接将NavigationLink作为List行的内容，点击行时自动触发跳转：

struct ContentView: View {
    let items = ["项目1", "项目2", "项目3"]
    
    var body: some View {
        NavigationStack { // iOS16+用*NavigationStack*，iOS13-15用*NavigationView*
            List(items, id: \.self) { item in
                NavigationLink(destination: DetailView(title: item)) {
                    Text(item)
                }
            }
            .navigationTitle("列表导航")
        }
    }
}

struct DetailView: View {
    let title: String
    var body: some View {
        Text(title)
            .navigationTitle(title)
    }
}

方式二：使用navigationDestination（iOS16+推荐） #

这种方式避免了NavigationLink嵌套在List行内，代码更简洁，适合多类型跳转场景：

struct ContentView: View {
    let items = ["项目1", "项目2", "项目3"]
    @State private var selectedItem: String?
    
    var body: some View {
        NavigationStack {
            List(items, id: \.self) { item in
                Text(item)
                    .onTapGesture {
                        selectedItem = item
                    }
            }
            .navigationTitle("列表导航")
            .navigationDestination(item: $selectedItem) { item in
                DetailView(title: item)
            }
        }
    }
}

2. 多项目导航的最优方案判断 #

没有绝对的最优，需根据iOS版本兼容需求选择：

• 若需要兼容iOS15及更早版本：只能用传统嵌套NavigationLink的方式，虽然嵌套层级多，但兼容性好。
• 若只需要支持iOS16+：优先用navigationDestination，它能集中管理所有跳转逻辑，避免List行内嵌套过多组件，代码可读性和维护性更强，尤其适合多类型目标视图的场景。

3. 获取列表行索引并添加点击条件判断 #

可以通过enumerated()遍历列表数据拿到索引，再结合条件判断决定是否跳转：

示例（结合navigationDestination） #

struct ContentView: View {
    let items = ["项目1", "项目2", "项目3"]
    @State private var selectedItem: (index: Int, title: String)?
    
    var body: some View {
        NavigationStack {
            List(Array(items.enumerated()), id: \.element) { index, item in
                Text(item)
                    .onTapGesture {
                        // 条件判断：比如只允许索引大于0的行跳转
                        if index > 0 {
                            selectedItem = (index, item)
                        }
                    }
            }
            .navigationTitle("带条件的导航")
            .navigationDestination(item: $selectedItem) { selected in
                DetailView(title: "第\(selected.index+1)个项目：\(selected.title)")
            }
        }
    }
}

示例（传统NavigationLink方式） #

struct ContentView: View {
    let items = ["项目1", "项目2", "项目3"]
    @State private var isNavigating = false
    @State private var targetItem: String?
    
    var body: some View {
        NavigationStack {
            List(Array(items.enumerated()), id: \.element) { index, item in
                NavigationLink(
                    destination: DetailView(title: targetItem ?? ""),
                    isActive: $isNavigating,
                    label: { Text(item) }
                )
                .onTapGesture {
                    // 条件判断：比如只允许索引大于0的行跳转
                    if index > 0 {
                        targetItem = item
                        isNavigating = true
                    }
                }
            }
            .navigationTitle("带条件的导航")
        }
    }
}

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