У меня есть следующий вид прокрутки, в котором отображается определенное количество карточек. Я хочу, чтобы в режиме прокрутки отображалось только 2 карты одновременно с небольшим выглядыванием справа, чтобы указать больше карточек. Прокрутка также должна прокручиваться по двум карточкам одновременно. Например, покажите карточку 1 и 2 с выглядывающей карточкой 3, затем при прокрутке покажите карточки 3 и 4 с выглядывающей карточкой 5, а затем при прокрутке покажите карточку 5. Если количество карточек нечетное, последняя карточка должна отображаться сама по себе, но с ведущее выравнивание в режиме прокрутки. Я также хотел бы, чтобы каждая карточка имела такой размер, чтобы отображение двух карточек занимало большую часть места, чтобы каждая карточка имела одинаковый размер и с расстоянием в 15 точек между карточками и краями (по горизонтали и вертикали). Как я могу этого добиться?
Вот мой код:
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()
}
}
Подробнее здесь: https://stackoverflow.com/questions/793 ... scrollview
