Карусель SwiftUI с содержимым переменной высоты с использованием ScrollView и LazyHStack ⇐ IOS

[Anonymous]

Я использую ScrollView и LazyHStack для создания горизонтальной карусели.
Я хочу достичь следующей цели:


Что я хочу:

• Изображение одинаковой ширины и высоты.
• Текст под изображением может быть 1,2. или 3 строки.
• Все изображения должны располагаться на одной строке с точки зрения выравнивания.
• Первая строка текста должна начинаться на одной строке. с точки зрения выравнивания

На данный момент мне удалось добиться следующего:


Как видите, изображения не выравниваются и ни текст из-за этого.
Вот мой код
Карусель:

Код: Выделить всё

struct CarouselView: View {
let content: Content
@State private var currentIndex = 0
@State private var contentSize: CGSize = .zero

private let showsIndicators: Bool
private let spacing: CGFloat
private let shouldSnap: Bool

init(showsIndicators: Bool = true,
spacing: CGFloat = .zero,
shouldSnap: Bool = false,
@ViewBuilder content: @escaping () -> Content) {
self.content = content()
self.showsIndicators = showsIndicators
self.spacing = spacing
self.shouldSnap = shouldSnap
}

var body: some View {
ScrollView(.horizontal, showsIndicators: showsIndicators) {
LazyHStack(spacing: spacing) {
content
}.apply {
if #available(iOS 17.0, *), shouldSnap {
$0.scrollTargetLayout()
} else {
$0
}
}
}
.apply {
if #available(iOS 17.0, *), shouldSnap {
$0.scrollTargetBehavior(.viewAligned)
} else {
$0
}
}
}
}

extension View {
func apply(@ViewBuilder _ block: (Self) -> V) -> V { block(self) }
}

А затем я использую карусель следующим образом:

Код: Выделить всё

struct ContentView: View {

let imagesNames = ["img-1", "img-2", "img-3", "img-4"]
let numberOfLines = [2, 1, 3, 2]

var body: some View {

VStack(spacing: 40) {
continuousCarousel
}

}

private var continuousCarousel: some View {
CarouselView(showsIndicators: true,
spacing: 20) {
ForEach(0 ..< imagesNames.count, id: \.self) { index in
createImageTile(with: imagesNames[index],
height: 70,
numberOfLines: numberOfLines[index])
}
}
}

private func createImageTile(with image: String,
height: CGFloat,
numberOfLines: Int) -> some View {
VStack(spacing: .zero) {
Image(image)
.resizable()
.cornerRadius(30)
.scaledToFit()
.aspectRatio(contentMode: .fill)
.frame(width: 200, height: 100)
.padding(.bottom, 30)

Text("Headline")
.bold()
.padding(.bottom, 10)

ForEach(0 ..< numberOfLines, id: \.self) { _ in
Text("Some description here")
.padding(.bottom, 5)
}
}
}
}

Мне кажется, что где-то можно применить выравнивание или использовать разделитель, но я не знаю, где.
Применение выравнивания по нижнему краю на моем lazyHStack не работал, поскольку основная область содержимого перемещалась в нижнюю часть области прокрутки.
Как мне добиться того, что мне нужно?
Обновление 1
После первого ответа ниже добавление разделителя в VStack помогло выровнять все по верху следующим образом:< /p>

Код: Выделить всё

private func createImageTile(with image: String,
height: CGFloat,
numberOfLines: Int) -> some View {
VStack(spacing: .zero) {
Image(image)
.resizable()
.cornerRadius(30)
.scaledToFit()
.aspectRatio(contentMode: .fill)
.frame(width: 200, height: 100)
.padding(.bottom, 30)

Text("Headline")
.bold()
.padding(.bottom, 10)

ForEach(0 ..<  numberOfLines, id: \.self) { _ in
Text("Some description here")
.padding(.bottom, 5)
}

Spacer() // added this
}
}

Однако это привело к еще одной проблеме: верхняя часть моего изображения обрезается.


Я попробовал добавить модификатор clipped в представление прокрутки, как предложено здесь, однако это не помогло ничего не изменишь.
Если я добавлю верхний интервал в VStack, это может сработать, но значение кажется произвольным и больше похоже на хак, чем на решение.

Подробнее здесь: https://stackoverflow.com/questions/784 ... llview-and