How can I access a ForEach loop's index outside of it in another view?

Viewed 126

I hope I worded the title correctly. Basically, I'm making a tinder-like interface that will allow the user to swipe through a set of cards. I've followed along with a tutorial to successfully make the swiping through the cards work. However, I can't for the life of me figure out how to get a button to do the same.

Here is an image of the ContentView ---> https://i.imgur.com/K9zN6Vj.png

Here is the main ContentView Code

import SwiftUI

struct ContentView: View {
    let cards = Card.data.shuffled()
    @State var isHelp = false
    
    var body: some View {
        VStack {
            ZStack {
                AnimatedBackground()
                    .ignoresSafeArea()
                    .blur(radius: 25)
                VStack {
                    //Top Stack
                    Spacer()
                    TopStack()
                    //Card
                    ZStack {
                        ForEach(cards, id: \.id) { index in
                            CardView(card: index)
//                                .shadow(color: .black, radius: 10)
                                .padding(8)
                        }
                    }
                    //Bottom Stack
                    BottomStack()
                }
            }
        }
    }
}

Here is the CardView code

struct CardView: View {
    @State var card: Card
    
    var body: some View {
        ZStack {
            Color("myBlue")
            Text("\(card.text)")
                .foregroundColor(.white)
            
        }
        
        .cornerRadius(20)
        // Step 1 - ZStack follows the coordinate of the card model
        .offset(x: card.x, y: card.y)
        .rotationEffect(.init(degrees: card.degree))
        // Step 2 - Gesture recognizer updaets the coordinate calues of the card model
        .gesture (
            DragGesture()
                .onChanged { value in
                    // user is dragging the view
                    withAnimation(.default) {
                        
                        card.x = value.translation.width
                        card.y = value.translation.height
                        card.degree = 7 * (value.translation.width > 0 ? 1 : -1)
                    }
                }
            
                .onEnded { value in 
                    // do something when the user stops dragging
                    withAnimation(.interpolatingSpring(mass: 1.0, stiffness: 50, damping: 8, initialVelocity: 0)) {
                        switch value.translation.width {
                        case 0...100:
                            card.x = 0; card.degree = 0; card.y = 0
                        case let x where x > 100:
                            card.x = 500; card.degree = 12
                        case (-100)...(-1):
                            card.x = 0; card.degree = 0; card.y = 0;
                        case let x where x < -100:
                            card.x = -500; card.degree = -12
                        default: card.x = 0; card.y = 0
                        }
                    }
                }
            
        )
    }
}

The bottom stack is just buttons. I want the buttons to essentially go forward and backward through the index, but I don't know how to access it because it's in a different view. Again, I'm not entirely sure how the main swiping is working; I followed along with a tutorial so I'm definitely out of my comfort zone. Maybe a button wouldn't work at all with the way the swiping is being achieved? Any help is super appreciated, thank you for taking a look!

0 Answers
Related