How do I Fix the alignment of this swiftUI view - swift

Question

I'm trying to put a number of DateCardViews inside a ScrollView as shown below
How do I fix the alignment DateCardView, so all DateCardViews are anchored to the top and start at the same level?
var body: some View {
VStack(alignment: .leading, spacing: 0) {
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .top) {
ForEach(dates.prefix(8), id: \.id) { date in
DateCardView(meetDate: date)
}
}
.padding(.horizontal, 16.0)
}
.padding(.bottom, 20.0)
}
}
struct DateCardView: View {
#State var meetDate: MeetDate
#State var swap = false
var isExpired: Bool {
Date.isAboutToExpire(date: meetDate.date)
}
var body: some View {
VStack {
Image(swap ? meetDate.user.profileImages.first! : meetDate.bgIamge)
.resizable()
.cornerRadius(16)
.overlay(
Image((swap ? meetDate.bgIamge : meetDate.user.profileImages.first!))
.resizable()
.cornerRadius(6)
.frame(width: 32, height: 40)
.padding(.bottom, 8)
.padding(.trailing, 8)
.onTapGesture {
swap.toggle()
}, alignment: .bottomTrailing
)
.frame(height: 154)
VStack(alignment: .leading) {
HStack {
Text(meetDate.title)
.font(.custom("SFCompactText-Medium", size: 18))
.lineLimit(2)
}
HStack {
Text(Date.yearString(date: meetDate.date))
Text(Date.timeString(date: meetDate.date))
.foregroundColor(isExpired ? Color("Expired") : Color.black)
Spacer()
}.font(.custom("SFCompactText-Medium", size: 14))
HStack {
Text(meetDate.length)
.font(.custom("SFCompactText-Medium", size: 12))
Text(meetDate.cost)
.font(.custom("SFCompactText-Medium", size: 12))
.foregroundColor(Color("cost"))
}
}
}.frame(width: 138, height: 235)
}
}

Answer 1

You can probably fix this by adding a Spacer at the bottom of your outer VStack, but as the code in your question won't compile I can't test it,
VStack {
Image(swap ? meetDate.user.profileImages.first! : meetDate.bgIamge)
//
VStack(alignment: .leading) {
// etc
}
Spacer(minLength: 0)
}.frame(width: 138, height: 235)

Answer 2

You can add Spacer() in your Vstack. I think that will work or you can change your alingment values.
VStack(alignment: .leading) {
//your code
Spacer()
}