SwiftUI: How to switch only first item of an array - ios

Question

I'm working on iOS App with a card-swipe function like Tinder. I have an array with cards. I want to integrate the possibility to flip the card to get more information.
struct TryView: View {
#ObservedObject var cards = APIObs()
#State var back = false
var body: some View {
GeometryReader{geo in
ZStack{
ForEach(cards.shows){ i in
ZStack{
if back == false{
SwipeDetailsView1(name: i.name, age: i.status, image: "https://image.tmdb.org/t/p/w500\(i.image)", height: geo.size.height-80, info: $back) .rotation3DEffect(.degrees(self.back ? 180.0 : 0.0), axis: (x: 0.0, y: 1.0, z: 0.0))
.zIndex(self.back ? 0 : 1)
}else{
BackView(name: i.name, height: geo.size.height-80, info: $back) .rotation3DEffect(.degrees(self.back ? 0.0 : 180.0), axis: (x: 0.0, y: -1.0, z: 0.0))
.zIndex(self.back ? 1 : 0)
}
}.animation(.easeOut(duration: 0.25))
}
}
}
}
My Problem is, that when back == true all cards of the array flip. I just want the first one to flip. Does anyone know how to manage that?

Answer 1

That is because your #State var back is for the array.
If you want to control each card you need a CardView with an #State var back for each card.
I put some sample code below. A minimum reproducible example is preferred so we don't have to recreate struct's and other components
import SwiftUI
struct TryView: View {
//#ObservedObject var cards = APIObs()//Code not Provided
#State var cards = ["Alpha", "Beta", "Charlie"]
var body: some View {
GeometryReader{geo in
VStack{
ForEach(cards, id: \.self){ i in
CardView(card: i)
}
}
}
}
}
struct SwipeDetailsView1: View {
var name: String
var body: some View {
Text(name)
}
}
struct BackView: View {
var name: String
var body: some View {
Text(name)
}
}
struct CardView: View {
#State var back = false //Variable for just the card
var card: String
var body: some View {
VStack{
ZStack{
if back == false{
SwipeDetailsView1(name: "front \(card)")
}else{
BackView(name: "back \(card)")
}
}.animation(.easeOut(duration: 0.25))
Button("flip", action: {
back.toggle()
})
}
}
}
struct TryView_Previews: PreviewProvider {
static var previews: some View {
TryView()
}
}