Переменные состояния и ForEach Swift

Question

Я пытаюсь создать простое представление в swiftUI с foreach l oop, которое содержит три кнопки и анимирует эти кнопки на основе переменной состояния. Проблема в том, что при нажатии одной кнопки все они анимируются. Я работал над этим несколько часов, но не могу придумать, как анимировать только одну из кнопок на виде, когда она нажата, без использования foreach l oop и всего лишь три разные переменные состояния для трех разных представлений CardView. Вот код для справки:

struct CardView: View {
    var flipped:Bool

    var body: some View {
        VStack {

            Image(flipped ? "cardFront" : "cardBack").renderingMode(.original)
                .resizable()
                .scaledToFit()
                .frame(height: 200)
                .rotation3DEffect(Angle(degrees: flipped ? 0 : 180), axis: (x: 0, y: 1, z: 0))
                .opacity(1)
            Text("Flip").padding()
        }
    }
}


struct ContentView: View {

    @State var isFlipped = false


    var body: some View {

        HStack {
            ForEach(0..<3) {number in
                Button(action: {
                    withAnimation(.spring()) {
                        self.isFlipped.toggle()
                    }
                }) {
                    CardView(flipped: self.isFlipped)
                }
            }
        }
    }
}

Буду очень признателен за любые указатели, так как я довольно новичок во всем этом. Я действительно хотел бы выяснить, как сделать эту работу в foreach l oop без вышеупомянутой работы вокруг.

Answer 1

Поместите переменную @State и Button в CardView. Вот базовый c пример:

Мне нужно было использовать Rectangle, поскольку у меня не было изображений, которые вы использовали.

struct CardView: View {

    @State var isFlipped = false

    var body: some View {
        VStack {
            Rectangle()
                .foregroundColor(self.isFlipped ? Color.blue : Color.red)
                .frame(width: 100, height: 200)
                .rotation3DEffect(Angle(degrees: self.isFlipped ? 0 : 180), axis: (x: 0, y: 1, z: 0))
                .opacity(1)
            Button(action: {
                withAnimation(.spring()) {
                    self.isFlipped.toggle()
                }
            }) {
                Text("Flip")
            }
        }
    }
}


struct ContentView: View {
    var body: some View {

        HStack {
            ForEach(0..<3) {number in
                CardView()
            }
        }
    }
}

Надеюсь, это поможет!