Padding based on the screen size-CodePudding

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:

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

CodePudding user response：

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.