SwiftUI：如何实现垂直排列文本的左上角对齐？

问题原因 #

你当前的实现里，VStack默认是居中对齐，还为单个Text组件添加了零散的.padding([.top, .leading])和硬编码的.offset(y: -25)，这种方式只适配特定数据（比如Nevers），换其他学校数据时，文本长度、行数变化会直接导致对齐混乱。

解决方案 #

• 给VStack设置alignment: .leading，让内部所有文本默认左对齐
• 移除单个Text的.padding([.top, .leading])，改成给VStack统一设置内边距，保证整体对齐一致
• 尽量不用硬编码的.offset调整位置，优先用布局容器的padding或spacing控制元素位置

修改后的完整代码 #

import SwiftUI

struct LycéesRow: View {
    var lycée: Lycée
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            
            lycée.image
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 365, height: 280)
                .clipped()
                .cornerRadius(15)
                .offset(y: -35)
            
            RoundedRectangle(cornerRadius: 15)
                .frame(width: 365, height: 280)
                .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 15))
                .offset(y: -35)
            
            lycée.image
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 355, height: 200)
                .clipped()
                .cornerRadius(15)
                .offset(x: 5)
                .offset(y: 39.8)
            
            // 修改后的VStack部分
            VStack(alignment: .leading, spacing: 4) { // 设置左对齐，调整spacing控制行间距
                Text(lycée.département + ", France")
                    .font(.system(size: 15, weight: .medium, design: .default))
                    .foregroundColor(.white)
                    .opacity(0.5)
                
                Text(lycée.nom)
                    .font(.system(size: 25, weight: .bold, design: .serif))
                    .foregroundColor(.white)
                
                Text(lycée.ville)
                    .font(.system(size: 10, weight: .light, design: .default))
                    .foregroundColor(.white)
            }
            .padding(.leading, 15) // 统一设置左边内边距，确保所有文本左对齐基准一致
            .padding(.top, 10) // 用顶部padding控制整体垂直位置，替代硬编码offset
            .offset(y: -25) // 若仍需微调整体位置可保留，建议优先用padding
            
        }
    }
}

struct LycéesRow_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LycéesRow(lycée: lycées[0])
            LycéesRow(lycée: lycées[1])
        }
    }
}

额外说明 #

• 调整VStack的spacing参数可以统一控制三行文本的垂直间距，比单独给每个Text加top padding更规整
• 统一的.padding(.leading)确保所有文本的左对齐基准线一致，不会因文本长度变化错位
• 若ZStack内的图片位置需要适配不同设备，建议把硬编码的.offset换成相对布局（比如结合GeometryReader），避免不同屏幕尺寸下出现偏移问题

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