How to make subview fit all available vertical space in HStack?

user_7834914 0
Viewed 575

I have two VStacks inside a HStack. Let's say the first has height 400px, and the second has height 300px. I'd like to set the background color of the two VStacks to be blue and red. But when I do so, because the second VStack doesn't use the full vertical space, the red ends up being a bit shorter. I want it to be the same height as the first.

I'm wondering if there is a general way to do this? I won't know the image dimensions / text in advance, so I can't just set the frame to be a fixed height.

Thanks so much!

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

enter image description here

swiftui swift ios
2 Answers

Add a Spacer:

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

Here is a solution.

Tested with Xcode 11.4 / iOS 13.4 with some replicated code

demo

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 !!
user_122990300
Related