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

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)
    }
}

CodePudding user response：

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)

CodePudding user response：

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()
}