如何使子视图适合 HStack 中的所有可用垂直空间？

Question

我在一个 HStack 中有两个 VStack。假设第一个高度为 400px，第二个高度为 300px。我想将两个 VStack 的背景颜色设置为蓝色和红色。但是当我这样做时，因为第二个 VStack 没有使用完整的垂直空间，红色最终会短一些。我希望它与第一个高度相同。

我想知道是否有一种通用的方法可以做到这一点？我不会提前知道图像尺寸/文字，所以我不能只将框架设置为固定高度。

非常感谢！

HStack(alignment: .top) {
    VStack {
        Image1
        Text1
    }.background(Color.blue)
    VStack {
        Image2
        Text2
    }.background(Color.red)
}

Answer 1

添加Spacer：

VStack {
    Image2
    Text2
    Spacer()
}.background(Color.red)

Answer 2

这里有一个解决方案。

使用 Xcode 11.4 / iOS 13.4 测试，并带有一些复制代码

HStack(alignment: .top) {
    VStack {
        Image1
        Text1
          .frame(maxHeight: .infinity, alignment: .top)  // << here !!
    }.background(Color.blue)
    VStack {
        Image2
        Text2
          .frame(maxHeight: .infinity, alignment: .top)  // << here !!
    }.background(Color.red)
}
.fixedSize(horizontal: false, vertical: true)    // << here !!