Search code examples
swiftuipositionzstack

How can I position 1 image relative to another in a ZStack in SwiftUI?


I have 2 images in a ZStack. How can I position image "x.circle" to the top right of the image "person.fill"?

ZStack {
        
        Image(systemName: "person.fill")
            .font(.system(size: 200))
        
        Image(systemName: "x.circle")
            .font(.system(size: 20, weight: .bold))
            .foregroundColor(.red)
            .background(.white)
            .clipShape(Circle())
}

Solution

  • Use ZStack(alignment: .topTrailing:

        ZStack(alignment: .topTrailing) {   // here
                    
            Image(systemName: "person.fill")
                .font(.system(size: 200))
                    
            Image(systemName: "x.circle")
                .font(.system(size: 20, weight: .bold))
                .foregroundColor(.red)
                .background(.white)
                .clipShape(Circle())
        }