Подпредставления SwiftUI обрезаются внутри прокрутки ⇐ IOS

[Anonymous]

Я создал представление «Карусель», используя ScrollView и LazyHStack следующим образом:

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

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 {
VStack {
ScrollView(.horizontal, showsIndicators: showsIndicators) {
LazyHStack(spacing: spacing) {
content
}.apply {
if #available(iOS 17.0, *), shouldSnap {
$0.scrollTargetLayout()
} else {
$0
}
}
}
.clipped() // tried to add this to avoid clipping
.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)
}

Spacer() // added to top align content
}
}
}

Это дает мне по большей части желаемый результат, однако, как вы можете видеть, верхняя часть изображения обрезается безопасной областью:


Я пытался добавить обрезанное< /code> модификатор прокрутки, как предложено в этом ответе, но безрезультатно.
Как я могу это решить?

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