Question 67736 in IOS Swift Question posted in
The official documentation can be found here.

Image card with Text on it in SwiftUI – Ios swift

I’m a newbie in SwiftUI and I want to create this card on the screen
enter image description here

I wrote this code snippet:

struct StakingCard: View {
    var body: some View {
        ZStack(alignment: .leading){
                    VStack(alignment: .leading){
                        Text("Staking CAKE").font(.headline)
                            .foregroundColor(.white)
                        Text("Stake tokens and get rewards")
                            .foregroundColor(.white)
                    }.frame(maxWidth: .infinity, maxHeight: 100)
                    .background(
                        Image("blac")
                    .resizable()
                    .scaledToFill())
                    .padding(0)
                
            }.cornerRadius(10)
                .padding(.horizontal,10)
               
            
        }
    }

and I got this:
enter image description here

But when I insert it into my Content view,
I get the following Screen:
The padding in the card is resizing and it does’not look good
enter image description here

Kindly direct me on how to go about this, thanks.

Tags:

2

Answers


  1. 0

    It may be helpful to share the code for the whole view of the screen, and not just the individual component since there are many factors that could be causing the issue.

    Most likely, the fix would be to set a fixed width on the view instead of using maxWidth: .infinity. Because the view is inside of a container that is scrolling, it’s impossible to figure out what the maximum width might be.

    Login or Signup to reply.
  2. 0

    A couple notes:

    1. The texts aren’t padded because there’s no .padding modifier on them (only .padding(0) on the image and .padding(10) on the ZStack)
    2. If .padding(10) is the padding between StakingCard‘s – that should be added by the HStack the cards exist in, not the card itself.
    3. Can get rid of the ZStack – the Image is set as the background via the .background modifier.
    4. That maxWidth: .infinity isn’t necessary, the cells are in a scrolling collection with unbounded width.

    Here’s an updated version:

    struct StakingCard: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Staking CAKE")
                .font(.headline)
                .foregroundColor(.white)
            Text("Stake tokens and get rewards")
                .foregroundColor(.white)
        }
        .padding(.horizontal) // #1 - Texts padding
        .frame(maxHeight: 100) // #4 - no maxWidth: .infinity
        .background(
            Image("blac")
                .resizable()
                .scaledToFill())
        .cornerRadius(10)
    }
}

struct StakingCard_Previews: PreviewProvider {
    static var previews: some View {
        // single card preview
        StakingCard()
        // collection preview
        ScrollView(.horizontal) {
            HStack(spacing: 10) { // #2 - padding between cells
                StakingCard()
                StakingCard()
            }
            .padding()
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search