CODEWITHSUNDEEP
iosswiftswiftuizstack
tHatpart
tHatpart

Reputation: 1136

SwiftUI combine views with Stack

I am trying to create a design like this using text and image in a ZStack but my current implementation isn't showing the text at all, and I don't know why

           ZStack {
                Text("15")
                    .frame(alignment: .topTrailing)
                    .cornerRadius(10)
                Image(systemName: agree ? "hand.thumbsup" : "hand.thumbsdown")
                    .frame(width: 40, height: 40)
                    .foregroundColor(agree ? .green : .red)
                    .background(.gray)
                    .cornerRadius(8)
            }

enter image description here

Upvotes: 1

Views: 418

Answers (1)

jnpdx
jnpdx

Reputation: 52475

In a ZStack, the views are stacked on the Z axis with the first defined views at the "bottom" of the stack. So, your text is currently covered up by the image, which is higher up on the stack. I've fixed this and added an offset to move the text to the top right, which also wasn't working in your code.

struct ContentView: View {
    @State private var agree = true
    
    var body: some View {
        ZStack(alignment: .topTrailing) {
            Image(systemName: agree ? "hand.thumbsup" : "hand.thumbsdown")
                .frame(width: 60, height: 60)
                .foregroundColor(agree ? .green : .red)
                .background(.gray)
                .cornerRadius(8)
            Text("15")
                .foregroundColor(Color.green)
                .padding(6)
                .background(
                    Circle()
                        .strokeBorder(Color.green, lineWidth: 2)
                        .background(Circle().foregroundColor(.white))
                )
                .offset(x: 10, y: -10)
        }
    }
}

Upvotes: 2

Related Questions