SwiftUI中如何让ForEach内子视图均分内边距与屏幕空间

核心修改思路 #

针对你遇到的子视图内边距不一致、文本变化导致高度改变，以及需要均分屏幕空间的问题，通过以下调整解决：

1. 父视图修改（实现均分屏幕空间） #

给每个子视图添加frame(maxWidth: .infinity)，让HStack自动将可用宽度平均分配给5个子视图，同时统一HStack的外部内边距：

// Last 5 Days Horizontal List
HStack(spacing: 0) {
    ForEach(last5Days) { day in
        Button {
            print("last 5 days clicked \(day.date)")
        } label: {
            CalendarItemMainPageView(passedDay: day)
                .frame(maxWidth: .infinity) // 强制均分宽度
        }
    }
}.padding(.horizontal) // 统一整个列表的左右内边距

2. 子视图修改（统一内边距+固定高度） #

通过统一内边距、强制填充父视图空间来解决内边距不一致和高度变化问题：

VStack(spacing: 4) { // 统一内容间距，避免零散间距导致的布局差异
    let dayAbbreviation = svm.getDayAbbreviation(from: passedDay.date)
    let isToday = svm.checkIsToday(for: passedDay.date)
    Text(dayAbbreviation)
        .foregroundStyle(.fDarkBlue)
        .font(.headline)
        .lineLimit(1)
    
    let dayInt = svm.getDayInt(from: passedDay.date)
    Text(String(dayInt))
        .foregroundStyle(.fDarkBlue)
        .font(.system(size: 20))
        .bold()
        .lineLimit(1)
    
    let percentageCompleted = vm.getPercentageCompleted(percent: passedDay.percentageCompleted)
    Text("\(Int(percentageCompleted * 100))%")
        .font(.caption)
        .lineLimit(1)
        .foregroundStyle(.fDarkBlue)
        .minimumScaleFactor(0.3)
    
}
.minimumScaleFactor(0.5)
.frame(maxWidth: .infinity, maxHeight: .infinity) // 强制填充父视图空间，固定高度
.padding(8) // 统一内容区域内边距，替代零散的top/bottom padding
.background {
    let isToday = svm.checkIsToday(for: passedDay.date)
    Rectangle()
        .fill(.fYellow)
        .cornerRadius(8.0)
}
.padding(5)
.background {
    Rectangle()
        .fill(Color(backgroundColor.rawValue))
        .cornerRadius(3.0)
}
.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
    }
}

关键修改点说明 #

• 均分空间：frame(maxWidth: .infinity)让每个子视图自动占据HStack的1/5宽度，彻底解决宽度不均问题。
• 统一内边距：移除子视图内部零散的padding(.top,5)、padding(.bottom,2)，改用VStack外层统一的padding(8)，保证所有子视图内边距完全一致。
• 固定高度：frame(maxHeight: .infinity)强制子视图填充父视图分配的高度，无论文本内容（如33%→100%）如何变化，高度都保持稳定；同时移除背景层的aspectRatio(contentMode: .fill)，避免背景比例限制导致的高度波动。

内容的提问来源于stack exchange，提问作者Mark George