CODEWITHSUNDEEP
swiftswiftui
drago
drago

Reputation: 1303

How to place texts under an image in SwiftUI?

I'm trying to create some tiles in my swiftUI project.

The tiles will need to look like this:

enter image description here

Basically, I need to place the caption on the left and the texts under the image.

I can create the image and I can overlay the texts on the image but I cannot place them under the image and I cannot place the caption to the left.

This is my current code:

Image("flower")
               .resizable()
               //.aspectRatio(contentMode: .fill)
               .frame(width: 160, height: 200)
               // Overlay is a very simple way to add content on top of your view ! 😁
     
    
               .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
               .shadow(color: Color.black.opacity(0.3), radius: 6, x: 0, y: 3)
     
        VStack(alignment: .trailing, spacing: 6) {
    
          Text("sit amet")
            .background(Color.gray.opacity(0.2))
            .font(.caption)
        }.onTapGesture {
                   // Handle the action when the card is touched
         
   
                }

can someone please advice on this?

Upvotes: 0

Views: 1684

Answers (1)

Shivani Bajaj
Shivani Bajaj

Reputation: 1046

Put the Image and text both under VStack as follows:

VStack(alignment: .leading, spacing: 6) {
      Image("flower")
                   .resizable()
                   //.aspectRatio(contentMode: .fill)
                   .frame(width: 160, height: 200)
                   // Overlay is a very simple way to add content on top of your view ! 😁
                   .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
                   .shadow(color: Color.black.opacity(0.3), radius: 6, x: 0, y: 3)
    
    Text("sit amet")
                .background(Color.gray.opacity(0.2))
                .font(.caption)
            }.onTapGesture {
                       // Handle the action when the card is touched
             
       
                    }

    Text("Some Info goes here")
    }

Upvotes: 1

Related Questions