如何让SwiftUI使用Rectangle绘制的柱状图各柱子拥有相同起始点

核心问题原因 #

你遇到的对齐问题和sheet无关，核心是两处代码错误导致的：

• 单个柱状条的VStack上下都添加了Spacer()，会让每个柱状条组件撑满父视图高度，内容自动居中，高度较小的柱子自然会整体上移
• 外层承载所有柱子的HStack没有指定底部对齐规则，同时ForEach内部多套了一层无用的HStack也会干扰布局

修改步骤 #

1. 调整单个柱状条布局 #

移除多余的Spacer()，只保留核心内容：

VStack(spacing: 4) {
    Text(history.target)
    Rectangle()
        .fill(trackingViewModel.starColor(stars: history.target))
        .frame(width: 70, height: trackingViewModel.barHeight(stars: history.target))
    Text(history.date)
}

2. 调整外层HStack布局 #

给外层HStack添加底部对齐，同时移除ForEach内部多余的嵌套HStack：

HStack(alignment: .bottom, spacing: 5) {
    ForEach(trackingViewModel.trackingHistory, id: \.self) { history in
        IndividualHistoryBar(history: history, trackingViewModel: trackingViewModel)
    }
}
// 可选：如果要让整个柱状图在sheet中靠底部展示，不居中悬浮，添加以下修饰符
.frame(maxHeight: .infinity, alignment: .bottom)

关于sheet的疑问说明 #

sheet默认只会将它的根视图在容器内居中，不会修改根视图内部的子视图对齐规则。你之前给HStack添加alignment属性不生效，完全是因为单个柱状条组件被Spacer撑满了高度，所有子视图高度一致，对齐规则自然不会生效，和sheet的默认行为没有关系。

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