SwiftUI中如何让HStack内的两个VStack始终对齐？

直接给你两个最实用的解决方案：

方案1：给HStack设置顶部对齐 #

问题根源是HStack默认垂直对齐为.center，当其中一个VStack因文本换行变高时，另一个VStack会居中对齐，导致下方文本错位。给HStack加上alignment: .top，让两个VStack从顶部开始排列，就能解决：

// 修改前的HStack
HStack {
    VerticalRowView(...)
    VerticalRowView(...)
}

// 修改后的HStack
HStack(alignment: .top) {
    VerticalRowView(...)
    VerticalRowView(...)
}

如果你的VerticalRowView内部的VStack未设置对齐，记得给VStack加上alignment: .leading（或你需要的对齐方向），确保内部文本也整齐对齐。

方案2：用Grid替代HStack+VStack（iOS 16+） #

如果需要更严谨的行列对齐（比如每一行文本严格对齐），用Grid组件会更省心，它会自动让每一行元素对齐，无需手动调整：

Grid(alignment: .leading) {
    GridRow {
        // 第一行的两个文本
        Text("长文本换行内容")
        Text("短文本")
    }
    GridRow {
        // 第二行的两个文本
        Text("下方文本")
        Text("下方文本")
    }
}

把原来的VerticalRowView拆成GridRow的形式，就能实现完美对齐。

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