SwiftUI：如何仅切换数组的第一项

Question

我正在开发具有像 Tinder 这样的刷卡功能的 iOS 应用程序。我有一个带有卡片的数组。我想整合翻转卡片以获取更多信息的可能性。

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

我的问题是，当back == true 数组中的所有卡片翻转时。我只想让第一个翻转。有谁知道如何管理它？

Answer 1

那是因为你的@State var back 是用于数组的。

如果你想控制每张卡，你需要一个CardView，每张卡都有一个@State var back。

我在下面放了一些示例代码。首选最小可重现示例，这样我们就不必重新创建 struct 和其他组件

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