SwiftUI美食卡片设计：如何将底部HStack移至卡片底部？

要让包含热量数值和心形图标的HStack对齐到卡片底部，只需在描述文本与底部HStack之间添加Spacer()即可——它会自动填充中间的剩余空间，将HStack推至容器底部。

修改后的完整代码：

VStack(alignment: .leading) {
  Text(name)
    .font(.title3)
    .fontWeight(.semibold)
    .padding(.top, 170)
        
  Text(description)
    .font(.caption)
  
  // 添加Spacer占据中间剩余空间，将下方HStack推至底部
  Spacer()
      
  HStack(spacing: 84) {
    Text("\(calories) Kcal")
      .font(.body)
      .fontWeight(.semibold)
        
    Image(systemName: "heart.fill")
      .font(.title)
      .fontWeight(.semibold)
      .foregroundStyle(.my)
  }
  // 可选：添加底部内边距，避免元素贴底过于紧凑
  .padding(.bottom, 16)
}
.frame(maxWidth: 227, maxHeight: 349)
.background(.red)
.clipShape(
  .rect(
    topLeadingRadius: 120,
    bottomLeadingRadius: 30,
    bottomTrailingRadius: 30,
    topTrailingRadius: 120
  )
)
.shadow(color: .black.opacity(0.1), radius: 10, y: 4)
.overlay {
  Image(.saladAllotment)
    .resizable()
    .scaledToFit()
    .frame(maxWidth: 227)
    .padding(.top, -140)
    .shadow(color: .black.opacity(0.3), radius: 10, y: 4)
}

关键说明： #

• Spacer()是SwiftUI专门用于填充布局剩余空间的容器，在VStack中添加后，会自动撑开描述文本与底部HStack之间的所有垂直可用空间，强制HStack对齐到卡片底部。
• 给底部HStack添加.padding(.bottom, 16)是为了优化视觉体验，避免元素完全贴住卡片边缘，可根据实际需求调整内边距数值。

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