SwiftUI中为含10+项的ListView创建带导航链接的数组

当然可以实现这个需求！我会帮你调整代码，让每个餐厅条目点击后跳转到对应的详情页面。下面是具体的修改步骤和完整代码：

1. 创建详情视图 #

首先我们需要一个展示餐厅详情的视图，它接收一个Restaurant对象作为参数：

struct RestaurantDetailView: View {
    var restaurant: Restaurant
    
    var body: some View {
        VStack(spacing: 20) {
            Text("餐厅详情")
                .font(.largeTitle)
                .fontWeight(.bold)
            Text("餐厅名称：\(restaurant.name)")
                .font(.title)
            // 这里可以添加更多详情内容，比如地址、评分、菜品介绍等
            Spacer()
        }
        .padding()
        .navigationTitle(restaurant.name)
    }
}

2. 完善模型与列表视图 #

接下来我们调整原有的代码，添加导航结构并让列表项支持跳转：

import SwiftUI

struct Restaurant: Identifiable {
    var id = UUID()
    var name: String
    // 如果你需要根据不同餐厅跳转不同类型的视图，可以在这里添加标识（比如枚举）
    // 不过大部分场景下，直接传递餐厅数据给统一的详情视图就足够了
}

struct RestaurantRow: View {
    var restaurant: Restaurant
    
    var body: some View {
        Text("Come and eat at \(restaurant.name)")
            .padding(.vertical, 8)
    }
}

struct Parts: View {
    // 将餐厅数组移到属性中，避免每次视图刷新都重新创建，提升性能
    private let restaurants = [
        Restaurant(name: "1"), Restaurant(name: "2"), Restaurant(name: "3"),
        Restaurant(name: "4"), Restaurant(name: "5"), Restaurant(name: "6"),
        Restaurant(name: "7"), Restaurant(name: "8"), Restaurant(name: "9"),
        Restaurant(name: "10"), Restaurant(name: "11"), Restaurant(name: "12"),
        Restaurant(name: "1"), Restaurant(name: "2"), Restaurant(name: "3"),
        Restaurant(name: "4"), Restaurant(name: "5"), Restaurant(name: "6"),
        Restaurant(name: "7"), Restaurant(name: "8"), Restaurant(name: "9"),
        Restaurant(name: "10"), Restaurant(name: "11"), Restaurant(name: "12")
    ]
    
    var body: some View {
        // iOS 16+ 使用NavigationStack，iOS 15及以下替换为NavigationView
        NavigationStack {
            List(restaurants) { restaurant in
                // 将列表项包装在NavigationLink中，点击后跳转到对应详情页
                NavigationLink(destination: RestaurantDetailView(restaurant: restaurant)) {
                    RestaurantRow(restaurant: restaurant)
                }
            }
            .listStyle(GroupedListStyle())
            .environment(\.horizontalSizeClass, .regular)
            .navigationTitle("餐厅列表") // 添加导航栏标题
        }
    }
}

struct Parts_Previews: PreviewProvider {
    static var previews: some View {
        Parts()
    }
}

关键修改点说明 #

• 导航容器：用NavigationStack（iOS16+）或NavigationView（旧版本）包裹整个列表，这是SwiftUI实现页面跳转的核心基础。
• NavigationLink：把每个RestaurantRow包装在NavigationLink里，指定跳转的目标视图为RestaurantDetailView，并传递对应的restaurant数据，确保详情页能展示对应餐厅的信息。
• 数据结构优化：把餐厅数组从body移到属性中，避免每次视图刷新都重复创建数组，提升运行效率。

这样修改后，你点击列表里的任意餐厅条目，就能跳转到对应的详情页面啦！

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