how can I manage scrollview with geometryreader in swiftui? - swiftui

Question

I am trying to build a ScrollView with a conjunct of UserCard. I want a responsive view because of that the view has a GeometryReader for relative layouts but the views are superposed over themself.
this is my code:
import SwiftUI
struct UserCard: View {
let user: User
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading) {
HStack {
Image(systemName: self.user.profileImage)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width * 0.1, height: geometry.size.width * 0.1)
.clipShape(Circle())
VStack(alignment: .leading) {
Text("\(self.user.name) \(self.user.surname)")
.font(.headline)
Text("Ubicación: \(self.user.location.latitude), \(self.user.location.longitude)")
.font(.caption)
.foregroundColor(.gray)
}
.padding(.leading, 10)
}
Text("Productos")
.font(.headline)
.padding(.top, 10)
ScrollView(.horizontal) {
HStack {
ForEach(self.user.products, id: \.id) { product in
VStack {
Image(systemName: product.images.first!)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width * 0.2, height: geometry.size.width * 0.2)
.cornerRadius(10)
.shadow(radius: 5)
Text(product.name)
.font(.body)
.padding(.top, 10)
Text(product.produceCategory.rawValue)
.font(.caption)
.foregroundColor(.gray)
}
.padding(.horizontal, 10)
}
}
}
}
.padding(.vertical, 20)
.padding(.horizontal, 20)
.background(Color.white)
.cornerRadius(20)
.shadow(radius: 10)
.padding(.vertical, 20)
.padding(.horizontal, 20)
}
}
}
struct ContentHomeView: View {
var body: some View {
ScrollView{
LazyVStack(spacing: 20){
ForEach(1..<100){_ in
UserCard(user: AppModelTest.user)
.padding(.vertical, 20)
}
} // LazyVStack
}
}
}
this View must look like a scrollView with individual cards showing de user info with his data but this issue I think is about GeometryReader.