ios – How to divide the padding equally among item in a ForEach SwiftUI


So I have an HStack and a ForEach inside it, I’m showing 5 child views, but my problem is that the padding differs, and also, when for example I change the text to a longer text for example, (33% to 100%) the height changes too. I want them to be divided equally among the screen.

Parent Code:

                        // Last 5 Days Horizontal List
                        HStack(spacing: 0) {
                            ForEach(last5Days) { day in
                                Button {
                                    print("last 5 days clicked \(day.date)")
                                } label: {
                                    CalendarItemMainPageView(passedDay: day)
                                        .padding(.horizontal)
                                }
                            }
                        }.padding(.horizontal)

Child View Code

VStack {
    let dayAbbreviation = svm.getDayAbbreviation(from: passedDay.date)
    let isToday = svm.checkIsToday(for: passedDay.date)
    Text(dayAbbreviation)
        .foregroundStyle(isToday ? .fDarkBlue : .fDarkBlue)
        .font(.headline)
        .padding(.top, 5)
        .lineLimit(1)
    
    let dayInt = svm.getDayInt(from: passedDay.date)
    Text(String(dayInt))
        .foregroundStyle(isToday ? .fDarkBlue : .fDarkBlue)
        .font(.system(size: 20))
        .bold()
        .lineLimit(1)
    
    let percentageCompleted = vm.getPercentageCompleted(percent: passedDay.percentageCompleted)
    Text(String(Int(percentageCompleted * 100)) + "%")
        .font(.caption)
        .lineLimit(1)
        .foregroundStyle(isToday ? .fDarkBlue : .fDarkBlue)
        .padding(.bottom, 2)
        .minimumScaleFactor(0.3)
    
}.minimumScaleFactor(0.5)
.background {
    let isToday = svm.checkIsToday(for: passedDay.date)

    Rectangle()
        .fill(isToday ? .fYellow : .fYellow)
        .cornerRadius(8.0)
        .aspectRatio(contentMode: .fill)
}
.padding(5)
.background {
    Rectangle()
        .fill(Color(backgroundColor.rawValue))
        .cornerRadius(3.0)
        .aspectRatio(contentMode: .fill)
}
    .onAppear {
        let isToday = svm.checkIsToday(for: passedDay.date)
        let percentageCompleted = vm.getPercentageCompleted(percent: passedDay.percentageCompleted)

        if !isToday {
            if percentageCompleted * 100 < 50.0 {
                backgroundColor = .pink
            }
        } else {
            backgroundColor = .pink
        }
    }

enter image description here

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img