我希望我的标题措辞正确。基本上,我正在制作一个类似火种的界面,允许用户在一组卡片中滑动。我已经按照教程成功地使刷卡工作。但是,我终其一生都无法弄清楚如何让按钮执行相同的操作。
这是 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
}
}
}
)
}
}
底部堆栈只是按钮。我希望按钮基本上可以在索引中前进和后退,但我不知道如何访问它,因为它处于不同的视图中。同样,我不完全确定主要滑动是如何工作的。我跟着教程一起做,所以我绝对超出了我的舒适区。也许一个按钮在实现滑动的方式下根本不起作用?非常感谢您的帮助,感谢您的浏览!