SwiftUI中点击ZStack如何实现跳转到其他视图？

要解决你的问题，核心是让NavigationLink在NavigationView（iOS16+推荐用NavigationStack）的层级内生效，同时把你的单元格内容作为NavigationLink的可点击区域。以下是具体修改步骤：

1. 定义跳转的目标视图 #

先创建一个接收图片信息的详情视图：

struct DetailView: View {
    var imageName: String
    
    var body: some View {
        VStack {
            Image(imageName)
                .resizable()
                .scaledToFit()
                .frame(width: 200, height: 200)
            Text("详情页：\(imageName.capitalized)")
                .font(.title)
        }
        .navigationTitle("详情")
    }
}

2. 修改CellView，添加可点击导航 #

把整个ZStack包裹在NavigationLink里，让单元格成为可点击区域：

struct CellView: View {
    var image: String
    var destination: some View
    
    var body: some View {
        NavigationLink(destination: destination) {
            ZStack{
                VStack{
                    Image(image).resizable().frame(width: 100, height: 100).scaledToFit()
                    Text(image.capitalized).font(.system(size: 19, weight: .bold))
                }
                RoundedRectangle(cornerRadius: 20)
                    .stroke(Color(red: 220/255, green: 9/255, blue: 73/255), lineWidth: 5.0)
                    .frame(width: 150, height: 150)
            }
        }
        // 可选：去掉NavigationLink默认的蓝色高亮样式
        .buttonStyle(.plain)
    }
    
    init(image: String, destination: some View) {
        self.image = image
        self.destination = destination
    }
}

3. 更新RowView，传入跳转目标 #

创建CellView时指定每个单元格的跳转详情页：

struct RowView: View {
    var image1: String
    var image2: String
    
    var body: some View {
        HStack(alignment: .center, spacing: 20.0){
            CellView(image: image1, destination: DetailView(imageName: image1))
            CellView(image: image2, destination: DetailView(imageName: image2))
        }
    }
    
    init(image1: String, image2: String) {
        self.image1 = image1
        self.image2 = image2
    }
}

4. 根视图必须包裹在导航容器中 #

这是你之前NavigationLink无效的核心原因！SwiftUI的导航必须依赖NavigationView/NavigationStack作为容器：

struct ContentView: View {
    // 模拟数据源
    let imagePairs = [
        ("cat", "dog"),
        ("bird", "fish"),
        ("rabbit", "hamster")
    ]
    
    var body: some View {
        // iOS13-15用NavigationView
        NavigationView {
            List(imagePairs, id: \.self) { pair in
                RowView(image1: pair.0, image2: pair.1)
            }
            .navigationTitle("动物列表")
        }
        // iOS16+推荐替换为NavigationStack：
        // NavigationStack {
        //     List(imagePairs, id: \.self) { pair in
        //         RowView(image1: pair.0, image2: pair.1)
        //     }
        //     .navigationTitle("动物列表")
        // }
    }
}

关键说明 #

SwiftUI的导航逻辑和UIKit类似：必须把需要导航的页面放在导航容器（NavigationView/NavigationStack）内，就像UIKit里要把VC放进UINavigationController才能push一样。直接用NavigationLink包裹单元格内容，是实现点击跳转最简洁的方式。

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