Understanding SwiftUI stacks: Why is there a spacing when items use "maxHeight: .infinity"

Andrei Herford 0
Viewed 33

I am trying to place different subviews in a VStack with a fixed height. The last item should use all the remaining space/height. I found several topics about this, and the solution is simply to give the an maxHeight: .infinity.

While this works, I notices that this includes a spacing between this element and the other elements, while there is now spacing between the other elements.

It is no problem to remove this spacing by explicitly defining the stack with spacing: 0. However, why is there a space between this item and the others in the first place (while the is no spacing between the other items)?

Example

struct SomeView: View {        
    var body: some View {
        VStack {
            Text("Row 1")
                .background(.red)
            Text("Row 2")
                .background(.green)
            
            Text("Row 3")
                .frame(maxHeight: .infinity)
                .background(.blue)
        }
        .frame(maxWidth: 300, maxHeight: 400)
        .background(.yellow)
    }
}

While there is no spacing between Row 1 and Row 2, giving Row 3 a maxHeight results in an extra spacing. Why?

enter image description here

swiftui ios
1 Answers

As stated in the docs:

spacing

The distance between adjacent subviews, or nil if you want the stack to choose a default distance for each pair of subviews.

Let's play around with the element heights (.frame(maxHeight: .infinity)) and look at some examples:

import SwiftUI

struct StackSpace: View {
    let myRed: Color = .init(red: 1.0, green: 0.6, blue: 0.6)
    let myGreen: Color = .init(red: 0.5, green: 1.0, blue: 0.5)
    let myBlue: Color = .init(red: 0.2, green: 0.9, blue: 1.0)
    
    var body: some View {
        HStack {
            VStack {
                Text("Row 1")
                    .background(myRed)
                Text("Row 2")
                    .background(myGreen)
                Text("Row 3 - ∞ -")
                    .frame(maxHeight: .infinity)
                    .background(myBlue)
            }
            .frame(maxWidth: 120, maxHeight: .infinity)
            .background(.yellow)

            VStack {
                Text("Row 1")
                    .background(myRed)
                Text("Row 2 - ∞ -")
                    .frame(maxHeight: .infinity)
                    .background(myGreen)
                Text("Row 3")
                    .background(myBlue)
            }
            .frame(maxWidth: 120, maxHeight: .infinity)
            .background(.yellow)

            VStack {
                Text("Row 1 - ∞ -")
                    .frame(maxHeight: .infinity)
                    .background(myRed)
                Text("Row 2")
                    .background(myGreen)
                Text("Row 3")
                    .background(myBlue)
            }
            .frame(maxWidth: 120, maxHeight: .infinity)
            .background(.yellow)
            
            VStack {
                Text("Row 1 - ∞ -")
                    .frame(maxHeight: .infinity)
                    .background(myRed)
                Text("Row 2 - ∞ -")
                    .frame(maxHeight: .infinity)
                    .background(myGreen)
                Text("Row 3 - ∞ -")
                    .frame(maxHeight: .infinity)
                    .background(myBlue)
            }
            .frame(maxWidth: 120, maxHeight: .infinity)
            .background(.yellow)
            
            VStack {
                Text("Row 1")
                    .background(myRed)
                Text("Row 2")
                    .background(myGreen)
                Text("Row 3 - ∞ -")
                    .frame(maxHeight: .infinity)
                    .background(myBlue)
                Text("Row 4")
                    .background(myGreen)
                Text("Row 5")
                    .background(myRed)
            }
            .frame(maxWidth: 120, maxHeight: .infinity)
            .background(.yellow)
            
        }
        .frame(maxHeight: 300)
        .background(.cyan)
    }
}

struct StackSpace_Previews: PreviewProvider {
    static var previews: some View {
        StackSpace()
    }
}

Output:

enter image description here

So, it appears that SwiftUI is effectively saying "This element is bigger than the others, so it should be prominent - that is, it should get spacing from its adjacent elements."

I imagine it's possible there are other properties SwiftUI looks at and determines "this element should be prominent" ...

DonMag0
Related