CODEWITHSUNDEEP
iosswiftswiftui
user11371080
user11371080

Reputation:

SwiftUI fill Vstack remaining space

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

Upvotes: 3

Views: 3162

Answers (1)

aheze
aheze

Reputation: 30346

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

Upvotes: 4

Related Questions