Creating mock application for senior project. I created a home page that then calls other views in displaying them in stacks. The bottom views include navigation links inside the images, on click should send the user to a new page. The images are not responding on click. I attempted to embed them in a NavigationView but then screws up the homepage completely. I am new to Swift and have been unable to find this issue anywhere else or been able to troubleshoot it. Any help would be greatly appreciated, Thanks!

Image for Homepage

Image for Small Cards View

import SwiftUI

struct ViewA: View {
    var body: some View {
        NavigationView  {
            ZStack {
                
                HStack {
                    
                    smallCardsView()
                        .offset(y:60)
                }
                
                Color(#colorLiteral(red: 0.1927102208, green: 0.282566458, blue: 0.3712197244, alpha: 1))
                    .frame(width: 500, height: 1000, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                Image("dumbell")
                    .resizable()
                    .frame(width: 380, height: 230, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .offset(y:-8)
                    .opacity(0.2)
                Divider().frame(width: 350, height: 10, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/).background(Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
                    .cornerRadius(/*@START_MENU_TOKEN@*/3.0/*@END_MENU_TOKEN@*/)
                    .padding(.bottom,30)
                
                Text("Weekly Workouts")
                    .font(.largeTitle)
                    .fontWeight(.medium)
                    .padding(.top, 240)
                    .foregroundColor(Color(#colorLiteral(red: 0.9327766299, green: 0.3332475424, blue: 0.3345346749, alpha: 1)))
                
                VStack {
                    
                    Spacer()
                        .frame(height:200)
                    
                    LaidView()
                    
                    HStack {
                        
                        smallCardsView()
                            .offset(y:60)
                    }
                    .frame(height:280)
                    
                    
                    
                    
                    
                    .cornerRadius(10)
                    
                }
                
            }
        }
        
    }
}

struct ViewA_Previews: PreviewProvider {
    static var previews: some View {
        ViewA()
        
    }
}

Code for Bottom View of homepage (SmallCardsView)

import SwiftUI

struct smallCardsView : View {
    var body: some View {
        //        ZStack {
        
        HStack{
            ZStack {
                NavigationLink(destination: Push()){
                    Image("bench-1")
                        .resizable()
                        .cornerRadius(12.0)
                        .shadow(radius:50 )
                        .frame(width: 125, height: 150)
                        .blur(radius: 2.0)
                }
                Rectangle()
                    .fill(Color(.black))
                    .opacity(0.2)
                    .frame(width: 125, height: 150, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .cornerRadius(12.0)
                
                Text("Push")
                    .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                    .font(.largeTitle)
            }
            
            ZStack {
                NavigationLink(destination: Pullworkouts()){
                    Image("bentover-1")
                        .resizable()
                        .cornerRadius(12.0)
                        .shadow(radius:50 )
                        .frame(width:125, height: 150)
                        .blur(radius: 2.0)
                    
                }
                
                Rectangle()
                    .fill(Color(.black))
                    .opacity(0.2)
                    .frame(width: 120, height: 150, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .cornerRadius(12.0)
                
                Text("Pull")
                    .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                    .font(.largeTitle)
                
                
            }
            
            
            ZStack {
                
                NavigationLink(destination: Legs()){
                    Image("backsquat")
                        .resizable()
                        .cornerRadius(12.0)
                        .shadow(radius:50 )
                        .frame(width: 120, height: 150)
                        .blur(radius: 2.0)
                    
                }
                
                Rectangle()
                    .fill(Color(.black))
                    .opacity(0.3)
                    .frame(width: 120, height: 150, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .cornerRadius(12.0)
                
                Text("Legs")
                    .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                    .font(.largeTitle)
            }
            
        }
        
        
        //        }
        .foregroundColor(.white)
        
        
    }
    
}

struct smallCards_Previews: PreviewProvider {
    static var previews: some View {
        smallCardsView()
    }
}

CodePudding user response：

Solving you case in MVVM pattern, I try to simplify example for easy understanding of conception. This example helps avoid to repeat your code and make it more flexible and supportable

First you need to create instance for each workout it you app. You can add any data here for displaying in views

struct Workout: Identifiable {
 let id = UUID().uuidString
 let name: String
 let image: String
}

Second need to create ViewModel that will contain all Workouts

class WorkoutViewModel: ObservableObject {
 var workouts: [Workout] = [
  Workout(name: "Push", image: "flame.fill"),
  Workout(name: "Pull", image: "externaldrive.connected.to.line.below"),
  Workout(name: "Legs", image: "florinsign.circle")
 ]
}

After have created data you can jump to mastering CardView and DetailView

struct CardView: View {

 var workout: Workout

 var body: some View {
     VStack {
         Image(systemName: workout.image)
             .resizable()
             .frame(width: 75, height: 75)
         Text(workout.name)
             .font(.subheadline)
     }
 }
}


struct CardDetailView: View {

 var workout: Workout

 var body: some View {
     VStack {
         Image(systemName: workout.image)
             .resizable()
             .frame(width: 150, height: 150)
         Text(workout.name)
             .font(.title)
             .fontWeight(.semibold)
     }
 }
}

And finally wrapping it all together

struct FinalView: View {

var vm = WorkoutViewModel()

var body: some View {
    NavigationView {
        HStack(spacing: 20) {
            ForEach(vm.workouts) { workout in
                NavigationLink(destination: CardDetailView(workout: workout)) {
                    CardView(workout: workout)
                }
            }
        }
    }
  }
}