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





