Search code examples
iosswiftswiftuizstack

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

Solution

  • 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)
        }
    }
}