状态变量和 ForEach Swift

Question

我正在尝试使用包含三个按钮的 foreach 循环在 swiftUI 中构建一个简单的视图，并根据状态变量为这些按钮设置动画。问题是，当按下一个按钮时，它们都会动画。我已经为此工作了好几个小时，但我想不出一种方法，让视图中只有一个按钮在按下时动画，而不是不使用 foreach 循环，只制作三个不同的状态变量三个不同的 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 循环中进行这项工作。

Answer 1

将@State 变量和Button 放入CardView。这是一个基本示例：

我需要使用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()
            }
        }
    }
}

我希望这会有所帮助！