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

我希望这会有所帮助！

状态变量和ForEach Swift

1 个答案: