Scrollen durch mehr als ein Element in SwiftUI ScrollView ⇐ IOS

[Guest]

Ich habe die folgende Scrollansicht, die eine bestimmte Anzahl von Karten anzeigt. Ich möchte, dass in der Bildlaufansicht jeweils nur zwei Karten angezeigt werden, mit einem leichten Blick auf die rechte Seite, um weitere Karten anzuzeigen. Die Scrollansicht sollte auch um 2 Karten gleichzeitig scrollbar sein. Zeigen Sie zum Beispiel Karte 1 und 2, während Karte 3 herausschaut, zeigen Sie dann beim Scrollen Karte 3 und 4, während Karte 5 herausschaut, und zeigen Sie dann beim Scrollen Karte 5. Wenn die Anzahl der Karten ungerade ist, sollte die letzte Karte für sich allein, aber mit angezeigt werden Führende Ausrichtung in der Scrollansicht. Ich möchte auch, dass jede Karte so groß ist, dass die 2-Karten-Anzeige den größten Teil des Platzes einnimmt, sodass jede Karte die gleiche Größe hat und zwischen den Karten und den Rändern (horizontal und vertikal) ein Abstand von 15 Punkten besteht. Wie kann ich das erreichen?
Hier ist mein Code:

Code: Select all

struct CardGallery: View {
@State var cards: [Int] = [1,2,3,4,5]

var body: some View {
GeometryReader { geometry in
VStack {

let width = geometry.size.width
let height = geometry.size.height / 1.5
let cardWidth = width / 2.2
let cardHeight = height / 1.2

ZStack {
ScrollView(.horizontal, showsIndicators: false) {
LazyHStack(spacing: 20) {
ForEach(cards, id: \.self) { level in
CardView(level: level)
.frame(width: cardWidth,height: cardHeight)
}
}
.padding(.horizontal)
}
.scrollTargetBehavior(.paging)
.background {
Color.yellow
}
.clipShape(RoundedRectangle(cornerRadius: 15))
.overlay {
RoundedRectangle(cornerRadius: 15)
.strokeBorder(Color.black, lineWidth: 5)
}
}
.frame(width: width, height: height)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
.background {
Color.green.ignoresSafeArea(.all)
}
}
}

struct CardView: View {
let level: Int

var body: some View {
VStack(alignment: .leading) {
RoundedRectangle(cornerRadius: 15)
.fill(Color.blue)
}
.padding()
}
}