Change image with click

Hi there! I want to change the current circle to a rectangle when I press the Right button. Is it possible if yes how can I it?

Here's the code:

struct ContentView: View {

    @State var vOffset: CGFloat = 0
    @State var hOffset: CGFloat = 0

    var body: some View {

        Circle()
            .frame(width: 80, height: 80)
            .position(x: 140 + hOffset, y: 140 + vOffset)

        Spacer(minLength: 20)

        Button(
            action: {
                vOffset += 20
            }, label: {
                Image(systemName: "arrowtriangle.down.circle.fill")
                    .resizable()
                    .foregroundColor(.blue)
                    .frame(width: 70, height: 70)
                    .padding()
            }
        )

        Button(
            action: {
                hOffset += 20
            }, label: {

                Image(systemName: "arrowtriangle.right.circle.fill")
                    .resizable()
                    .foregroundColor(.blue)
                    .frame(width: 70, height: 70)
                    .padding()
            }
        )
    }
}

You have to use a State var. That's the general principle in SwiftUI:

Here it will switch to square each time you press right, and to circle when press bottom.

struct ContentView: View {

    @State var vOffset: CGFloat = 0
    @State var hOffset: CGFloat = 0
    @State var isSquare = false

    var body: some View {

        if isSquare {
            Rectangle()
                .frame(width: 80, height: 80)
                .position(x: 140 + hOffset, y: 140 + vOffset)
        } else {
            Circle()
            .frame(width: 80, height: 80)
            .position(x: 140 + hOffset, y: 140 + vOffset)
        }
        Spacer(minLength: 20)

        Button(
            action: {
                vOffset += 20
                isSquare = false
            }, label: {
                Image(systemName: "arrowtriangle.down.circle.fill")
                    .resizable()
                    .foregroundColor(.blue)
                    .frame(width: 70, height: 70)
                    .padding()
            }
        )

        Button(
            action: {
                hOffset += 20
                isSquare = true
            }, label: {

                Image(systemName: "arrowtriangle.right.circle.fill")
                    .resizable()
                    .foregroundColor(.blue)
                    .frame(width: 70, height: 70)
                    .padding()
            }
        )
    }
}

Okay thanks!

Change image with click
 
 
Q