为何父HStack中的两个VStack高度不一致？

嗨，我来帮你捋清楚这个SwiftUI布局的常见问题～ 其实这种情况在日常开发里挺容易碰到的，主要是这几个原因导致的：

• 内容本身的高度差异：如果两个VStack里的子视图（比如你写的TimelineStep组件）数量不一样、文本长度有差，或者某个组件里的元素（比如图标、描述文本）尺寸不同，那对应的VStack肯定会被内容撑出不同的高度。比如其中一个TimelineStep的description文本比另一个长很多，那它所在的VStack自然就更高。

• SwiftUI默认布局逻辑的特性：HStack默认的对齐方式是.center，而且每个子视图（也就是这里的VStack）默认只会“包裹”自身的内容，不会主动拉伸到和其他子视图同高。简单说就是，HStack不会自动强制里面的VStack都占满自己的高度，除非你明确告诉它要这么做。

• 缺少拉伸类的布局修饰符：如果你的VStack没加frame(maxHeight: .infinity)这类修饰符，那它就只会根据自身内容的大小来确定高度，不会扩展到HStack的最大可用高度，自然就和另一个VStack高度不一样了。

那怎么解决呢？给你几个实用的办法：

1. 强制VStack拉伸到最大高度：给每个VStack加上.frame(maxHeight: .infinity)，这样它们都会自动填充HStack的整个高度，不管自身内容多少，高度就完全一致了。示例代码如下：

HStack(spacing: 20) {
    VStack(alignment: .leading, spacing: 12) {
        TimelineStep(icon: "checkmark.circle.fill", title: "Install & Set up", description: "You've successfully personalized your experience", isCompleted: true, isLast: false)
        // 其他TimelineStep组件
    }
    .frame(maxHeight: .infinity)

    VStack(alignment: .leading, spacing: 12) {
        // 另一个VStack的内容
    }
    .frame(maxHeight: .infinity)
}

2. 统一HStack的对齐基准：如果不想强制拉伸高度，只是想让两个VStack视觉上对齐更规整，可以设置HStack的alignment为.top（或者.bottom、.firstTextBaseline），这样两个VStack会对齐到同一基准线，视觉上的高度差异就没那么突兀了：

HStack(alignment: .top, spacing: 20) {
    // 两个VStack的内容
}

3. 统一内部组件的高度：检查你的TimelineStep组件，确保每个实例的高度是统一的。比如给TimelineStep内部的描述文本设置固定行数，或者给TimelineStep本身加上.frame(minHeight: 80)这类固定最小高度的修饰符，让每个TimelineStep高度一致，那它们所在的VStack高度自然就相同了。

你可以先排查下两个VStack里的内容是不是本身高度就有差异，再根据需求选上面的方法调整，应该就能解决问题啦～

内容来源于stack exchange