CODEWITHSUNDEEP
swiftswiftui
Gurmukh Singh
Gurmukh Singh

Reputation: 2017

Padding based on the screen size

I have a card view:

var body: some View {
    VStack {
        Text(tip)
            .padding(.bottom)
            .font(.custom("Roboto-Light", size:10))
        Text(tipTitle)
            .multilineTextAlignment(.center)
            .font(.custom("Roboto-Bold", size:24))
        Text(tipMessage)
            .font(.custom("Roboto-Light", size:14))
            .multilineTextAlignment(.center)
            .padding(.top,1)
        Image(image)
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 200, height: 150)
    }
    .padding()
    .background(Color("grey"))
    .cornerRadius(15)
    .padding(.horizontal)
}

When I use these cards, the padding varies based on the text I add:

enter image description here

How can we fix the card size so the sizes for the cards are always the same?

Upvotes: 0

Views: 567

Answers (1)

jrturton
jrturton

Reputation: 119242

A VStack will hug its contents, making itself as small as possible. If you want it to fill the available space, then make the contents as wide as possible. Your variable element is probably Text(tipMessage), so you should add a modifier to it, before the padding modifier, to make it fill the available space:

.frame(maxWidth: .infinity, alignment: .center)

A more complete screenshot showing the actual card contents would have been more helpful than the one you posted.

Upvotes: 2

Related Questions