如何为Xcode随机卡片生成器的每张卡片创建对应页面？

第一步：创建每张卡片的详情页面 #

在你的代码文件中，主View外部先定义四个简单的详情页，每个页面对应一张卡片的内容：

// image1对应的详情页
struct Image1View: View {
    var body: some View {
        VStack {
            Image("image1")
                .resizable()
                .frame(width: 200, height: 283.5)
            Text("这是image1的详情页")
                .font(.title)
        }
    }
}

// image2对应的详情页
struct Image2View: View {
    var body: some View {
        VStack {
            Image("image2")
                .resizable()
                .frame(width: 200, height: 283.5)
            Text("这是image2的详情页")
                .font(.title)
        }
    }
}

// image3对应的详情页
struct Image3View: View {
    var body: some View {
        VStack {
            Image("image3")
                .resizable()
                .frame(width: 200, height: 283.5)
            Text("这是image3的详情页")
                .font(.title)
        }
    }
}

// image4对应的详情页
struct Image4View: View {
    var body: some View {
        VStack {
            Image("image4")
                .resizable()
                .frame(width: 200, height: 283.5)
            Text("这是image4的详情页")
                .font(.title)
        }
    }
}

第二步：修改主界面代码，添加跳转功能 #

我把你原来的代码做了简化优化，核心是加入跳转容器和可点击的跳转控件：

struct ContentView: View {
    private var imgs = ["image1", "image2", "image3", "image4"]
    // 简化成单独变量存储当前显示的图片索引，更直观
    @State private var currentImageIndex = 1
    @State var buttonTapped = false
    
    var body: some View {
        // NavigationStack是实现页面跳转的必要容器
        NavigationStack {
            VStack {
                // 将图片包裹在NavigationLink里，点击就跳对应页面
                NavigationLink(destination: getDetailView()) {
                    Image(imgs[currentImageIndex])
                        .resizable()
                        .frame(width:150 , height:212.63)
                }
                
                Button(action: {
                    currentImageIndex = Int.random(in:0...imgs.count - 1)
                    buttonTapped.toggle()
                }){ 
                    Text("DEAL")
                }
                .disabled(buttonTapped)
            }
            .navigationTitle("随机卡片生成器")
        }
    }
    
    // 根据当前图片索引返回对应详情页
    private func getDetailView() -> some View {
        switch currentImageIndex {
        case 0:
            return Image1View()
        case 1:
            return Image2View()
        case 2:
            return Image3View()
        case 3:
            return Image4View()
        default:
            return Image1View()
        }
    }
}

关键说明 #

• NavigationStack：SwiftUI中负责页面跳转的基础容器，必须添加才能让跳转生效
• NavigationLink：可点击的跳转控件，把图片包在里面，点击时会跳转到destination指定的页面
• getDetailView()：根据当前显示的卡片索引，自动匹配对应的详情页，避免重复代码

测试步骤 #

1. 确保你的四张图片（image1到image4）已经添加到Xcode的Assets资源库中
2. 运行项目，点击DEAL按钮随机生成卡片
3. 点击显示的卡片，即可跳转到对应的详情页面

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