如何使子视图适合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 !!