大家好!我想建立一个视图与ZStack的卡获得信息从一个数组。卡必须刷卡向左和向右的。手势修饰符,没有任何其他按钮。我想要的是,当当前卡显示,下一张卡是看不到的。而当当前卡离开,下一张卡自动显示。
长话短说,我想让刷卡UI像在Tinder或Quizlet中一样,而不使用Foreach,一次布局所有的卡片(可能有很多)
我尝试不带任何修饰符地循环ForEach(array. indexs),并且所有卡片同时显示在堆栈中,但是我希望它们在用户刷当前卡片时更新。我不知道还有其他方法来编写更新视图的代码(初学者)。
struct ContentView: View {
@EnvironmentObject var model: Model
var body: some View {
VStack {
ZStack {
RoundedRectangle(cornerRadius: 20)
.aspectRatio(CGSize(width: 150, height: 300), contentMode: .fit)
.foregroundColor(.white)
.shadow(radius: 5)
.padding(50)
ForEach(model.flashcard.reversed()) { card in
AllCardView(flashcard: Flashcard(front: card.front, back: card.back))
}
.padding()
}
}
}
}
1条答案
按热度按时间noj0wjuj1#
方法:
ZStack
堆叠卡片DragGesture
.onChanged
和.onEnded
移动卡片withAnimation { }
设置值更改的动画下面给出的是一个粗略的实现,您可以将其用作指导并对其进行改进:
卡片:
型号:
卡片视图:
内容视图: