iOS Development

ios – divide the padding equally amongst merchandise in a ForEach SwiftUI

Spread the love


So I’ve an HStack and a ForEach inside it, I am displaying 5 youngster views, however my drawback is that the padding differs, and in addition, when for instance I modify the textual content to an extended textual content for instance, (33% to 100%) the peak modifications too. I need them to be divided equally among the many display.

Mother or father Code:

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

Youngster View Code

VStack {
    let dayAbbreviation = svm.getDayAbbreviation(from: passedDay.date)
    let isToday = svm.checkIsToday(for: passedDay.date)
    Textual content(dayAbbreviation)
        .foregroundStyle(isToday ? .fDarkBlue : .fDarkBlue)
        .font(.headline)
        .padding(.high, 5)
        .lineLimit(1)
    
    let dayInt = svm.getDayInt(from: passedDay.date)
    Textual content(String(dayInt))
        .foregroundStyle(isToday ? .fDarkBlue : .fDarkBlue)
        .font(.system(dimension: 20))
        .daring()
        .lineLimit(1)
    
    let percentageCompleted = vm.getPercentageCompleted(p.c: passedDay.percentageCompleted)
    Textual content(String(Int(percentageCompleted * 100)) + "%")
        .font(.caption)
        .lineLimit(1)
        .foregroundStyle(isToday ? .fDarkBlue : .fDarkBlue)
        .padding(.backside, 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(Shade(backgroundColor.rawValue))
        .cornerRadius(3.0)
        .aspectRatio(contentMode: .fill)
}
.onAppear {
    let isToday = svm.checkIsToday(for: passedDay.date)
    let percentageCompleted = vm.getPercentageCompleted(p.c: passedDay.percentageCompleted)

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

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *