SwiftUI中如何为ScrollView卡片添加跳转至新视图的交互

要实现类似UIKit里TableView Cell点击跳转的功能，SwiftUI可以通过导航容器+NavigationLink完成，以下是针对你代码的改造方案：

步骤1：准备目标详情视图 #

先定义要跳转到的详情页，支持传递卡片对应的数据源：

// 假设你的tabs数组元素类型是SectionModel，需提前定义
struct SectionModel: Identifiable {
    let id = UUID()
    let name: String
    let thumbnail: Image // 可根据实际图片类型调整，比如String
}

struct DetailView: View {
    let section: SectionModel
    var body: some View {
        VStack(spacing: 20) {
            section.thumbnail
                .resizable()
                .scaledToFit()
            Text("这是\(section.name)的详情内容")
                .font(.title)
        }
        .padding()
        .navigationTitle(section.name)
    }
}

步骤2：改造ScrollViewCont实现跳转 #

把滚动视图包裹在导航容器中，给每个卡片添加跳转逻辑：

struct ScrollViewCont: View {
    let tabs: [SectionModel] // 你的数据源数组
    
    var body: some View {
        // iOS 16+ 用NavigationStack，iOS 15及以下替换为NavigationView
        NavigationStack {
            ScrollView(.horizontal){
                HStack{
                    ForEach(tabs) { sections in
                        GeometryReader { geometry in
                            // 用NavigationLink包裹卡片，点击后跳转到详情页
                            NavigationLink(destination: DetailView(section: sections)) {
                                ScrollViewTabs(
                                    tabText: sections.name,
                                    tabImage: sections.thumbnail
                                )
                                .rotation3DEffect(Angle(degrees: (Double(geometry.frame(in: .global).minX) - 210) / -20), axis: (x: 0, y: 1.0, z: 0))
                            }
                            // 可选：移除系统默认的按钮高亮样式
                            .buttonStyle(PlainButtonStyle())
                        }
                        .frame(width: 200, height: 250)
                        .padding()
                    }         
                }
            }
            .navigationTitle("卡片列表") // 设置导航栏标题，可选
        }
    }
}

关键说明 #

• 导航容器是基础：SwiftUI的页面跳转必须依赖NavigationStack（或旧版NavigationView）提供的导航上下文，没有它NavigationLink无法生效。
• 数据传递：通过NavigationLink的destination参数，可将当前卡片对应的数据源传递给详情页，实现动态内容展示。
• 自定义交互样式：如果不需要系统默认的按钮高亮效果，添加.buttonStyle(PlainButtonStyle())即可让卡片点击时无额外视觉反馈。

内容的提问来源于stack exchange，提问作者Eng.Maher