SwiftUI fill Vstack remaining space

Viewed 786

I am currently building out some small information pieces in my SwiftUI application and would like for the blue background color to fill the rest of the outlined space (this is just highlighted from the preview in Xcode). How can I accomplish this?

HStack {
    VStack {
        Text("Total Yield").padding([.trailing, .leading, .top])
        Text("3.0 oz").padding([.trailing, .leading, .bottom])
    }
    .background(Color.blue)
    .frame(maxWidth: .infinity)

    Spacer()

    VStack {
        Text("Ice").padding([.trailing, .leading, .top])
        Text("None").padding([.trailing, .leading, .bottom])
    }
    .background(Color.blue)
    .frame(maxWidth: .infinity)

    Spacer()

    VStack {
        Text("Glass").padding([.trailing, .leading, .top])
        Text("Coupe").padding([.trailing, .leading, .bottom])
    }
    .background(Color.blue)
    .frame(maxWidth: .infinity)
}
.padding()

I would have assumed setting the frame maxWidth to infinity would have accomplished this but does not seem to be having the desired effect.

enter image description here

1 Answers

The order of modifiers is important. If you want the blue .background to use the expanded frame, it needs to be after the .frame.

.frame(maxWidth: .infinity)
.background(Color.blue)

Result:

3 blue rectangles with equal width, side by side horizontally

Related