SwiftUI combine views with Stack

user_10803309 0
Viewed 86

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

zstack swiftui swift ios
1 Answers

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)
        }
    }
}
user_5609420
Related