How to add a system Image at the corner of an other Image View

Question

I would like to know how to add an Image system on one of the corners of an image.

I have no idea how to do that, if anyone can shed some light on this, it would be a pleasure.

Answer 1

You need a ZStack with the main image and a button with the icon. You can define how you want the images aligned - in this case .topTrailing:

struct LayeredImage: View {
    var body: some View {
        ZStack(alignment: .topTrailing) {
            Image("card")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .padding(6.0)
            Button(action: { }) {
                Image(systemName: "ellipsis.circle.fill")
                    .foregroundColor(.gray)
                    .font(.largeTitle)
            }
        }   .padding()
    }
}