状态变量和 ForEach Swift

Posted 2023-02-24

【中文标题】状态变量和 ForEach Swift

【英文标题】：State Variables and ForEach Swift

【发布时间】：2020-01-13 13:29:32

【问题描述】：

我正在尝试使用包含三个按钮的 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 循环中进行这项工作。

【问题讨论】：

为什么首先要在循环中添加按钮，特别是如果您有固定数量的按钮？ ForEach 最适合与数组和其他大小可能不同的集合类型一起使用。

我正在考虑在更大范围内应用更多元素，所以我想知道是否有一种有效的方法可以做到这一点，而无需为每个元素都创建状态变量。

如果元素相互独立，它们需要自己的变量。

好的，感谢您的确认。我想知道我是否遗漏了什么。

【参考方案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()
            
        
    

我希望这会有所帮助！

【讨论】：

传奇。这正是我想要的。感谢您花时间帮助我解决这个问题。

@テッド 没问题！