如何修复SwiftUI中DateCardView的顶部对齐问题？

你遇到的对齐问题源于DateCardView内部外层VStack默认采用垂直居中对齐，再加上固定了卡片高度（235），导致内容在卡片内居中分布，最终让各卡片的顶部元素看起来没有对齐。通过以下两步即可解决：

1. 调整DateCardView外层VStack的对齐方式 #

将DateCardView里的外层VStack设置为顶部对齐，同时设置合适的元素间距：

VStack(alignment: .leading, spacing: 8) {
    // 图片区域代码保持不变
    Image(swap ? meetDate.user.profileImages.first! : meetDate.bgIamge)
            .resizable()
            .cornerRadius(16)
            .overlay(
                Image((swap ? meetDate.bgIamge : meetDate.user.profileImages.first!))
                    .resizable()
                    .cornerRadius(6)
                    .frame(width: 32, height: 40)
                    .padding(.bottom, 8)
                    .padding(.trailing, 8)
                    .onTapGesture {
                        swap.toggle()
                    }, alignment: .bottomTrailing
            )
            .frame(height: 154)
    // 文本区域代码保持不变
    VStack(alignment: .leading) {
        // ... 原有文本逻辑
    }
}
.frame(width: 138, height: 235)

2. 确保文本区域顶对齐 #

如果不同卡片的文本长度不一致，可在文本区域的VStack底部添加Spacer()，强制文本内容顶在图片下方：

VStack(alignment: .leading) {
    HStack {
        Text(meetDate.title)
            .font(.custom("SFCompactText-Medium", size: 18))
            .lineLimit(2)
    }
    HStack {
        Text(Date.yearString(date: meetDate.date))
        Text(Date.timeString(date: meetDate.date))
            .foregroundColor(isExpired ? Color("Expired") : Color.black)
        Spacer()
    }.font(.custom("SFCompactText-Medium", size: 14))
    HStack {
        Text(meetDate.length)
            .font(.custom("SFCompactText-Medium", size: 12))
        Text(meetDate.cost)
            .font(.custom("SFCompactText-Medium", size: 12))
            .foregroundColor(Color("cost"))
    }
    Spacer() // 添加此Spacer，让文本始终顶对齐
}

补充说明 #

你外层的HStack(alignment: .top)设置是正确的，问题核心在卡片内部的布局逻辑。修改后，所有卡片的图片会紧贴顶部，文本区域也会紧跟图片下方，实现完全的顶部锚定对齐。

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