如何在另一个视图中访问 ForEach 循环外部的索引?

时间:2021-02-22 04:38:43

标签: ios swift xcode swiftui

我希望我的标题措辞正确。基本上,我正在制作一个类似火种的界面,允许用户在一组卡片中滑动。我已经按照教程成功地使刷卡工作。但是,我终其一生都无法弄清楚如何让按钮执行相同的操作。

这是 ContentView 的图像 ---> https://i.imgur.com/K9zN6Vj.png

这里是主要的ContentView代码

import SwiftUI

struct ContentView: View {
    let cards = Card.data.shuffled()
    @State var isHelp = false
    
    var body: some View {
        VStack {
            ZStack {
                AnimatedBackground()
                    .ignoresSafeArea()
                    .blur(radius: 25)
                VStack {
                    //Top Stack
                    Spacer()
                    TopStack()
                    //Card
                    ZStack {
                        ForEach(cards, id: \.id) { index in
                            CardView(card: index)
//                                .shadow(color: .black, radius: 10)
                                .padding(8)
                        }
                    }
                    //Bottom Stack
                    BottomStack()
                }
            }
        }
    }
}

这是 CardView 代码

struct CardView: View {
    @State var card: Card
    
    var body: some View {
        ZStack {
            Color("myBlue")
            Text("\(card.text)")
                .foregroundColor(.white)
            
        }
        
        .cornerRadius(20)
        // Step 1 - ZStack follows the coordinate of the card model
        .offset(x: card.x, y: card.y)
        .rotationEffect(.init(degrees: card.degree))
        // Step 2 - Gesture recognizer updaets the coordinate calues of the card model
        .gesture (
            DragGesture()
                .onChanged { value in
                    // user is dragging the view
                    withAnimation(.default) {
                        
                        card.x = value.translation.width
                        card.y = value.translation.height
                        card.degree = 7 * (value.translation.width > 0 ? 1 : -1)
                    }
                }
            
                .onEnded { value in 
                    // do something when the user stops dragging
                    withAnimation(.interpolatingSpring(mass: 1.0, stiffness: 50, damping: 8, initialVelocity: 0)) {
                        switch value.translation.width {
                        case 0...100:
                            card.x = 0; card.degree = 0; card.y = 0
                        case let x where x > 100:
                            card.x = 500; card.degree = 12
                        case (-100)...(-1):
                            card.x = 0; card.degree = 0; card.y = 0;
                        case let x where x < -100:
                            card.x = -500; card.degree = -12
                        default: card.x = 0; card.y = 0
                        }
                    }
                }
            
        )
    }
}

底部堆栈只是按钮。我希望按钮基本上可以在索引中前进和后退,但我不知道如何访问它,因为它处于不同的视图中。同样,我不完全确定主要滑动是如何工作的。我跟着教程一起做,所以我绝对超出了我的舒适区。也许一个按钮在实现滑动的方式下根本不起作用?非常感谢您的帮助,感谢您的浏览!

0 个答案:

没有答案
相关问题