图像中的 NavigationLink 在点击时没有响应

Question

正在为高级项目创建模拟应用程序。我创建了一个主页，然后调用其他视图以堆栈形式显示它们。底部视图包括图像内的导航链接，点击后应将用户带到新页面。图像在点击时没有响应。我试图将它们嵌入到 NavigationView 中，但随后完全搞砸了主页。我是 Swift 的新手，无法在其他任何地方找到此问题或无法对其进行故障排除。任何帮助将不胜感激，谢谢！

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()
        
    }
}

首页底部视图代码（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()
    }
}

Answer 1

以MVVM 模式解决您的问题，我尝试简化示例以便于理解概念。此示例有助于避免重复您的代码并使其更加灵活和可支持

首先，您需要为您应用的每个锻炼创建实例。您可以在此处添加任何数据以在视图中显示

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

其次需要创建包含所有锻炼的 ViewModel

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

创建数据后，您可以跳转到掌握 CardView 和 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)
     }
 }
}

最后将它们全部打包在一起

struct FinalView: View {

@StateObject var vm = WorkoutViewModel()

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

图像中的 NavigationLink 在点击时没有响应

NavigationLink inside image not responding on click

xcode

ios

swift

swiftui