SwiftUI .onTapGesture never called

Question

Attached is a simple SwiftUI struct that shows a set of "expanding buttons". I display the top button (the other 3 are 1x1 and behind the top button.) When the user taps the top button, it expands to 40x40 and moves the underlying buttons in a nice animation.

The problem I have is that none of the underlying buttons will respond to their.onTapGesture. I can tap the top button again and the animation reverses, but nothing happens when the other buttons are tapped.

import SwiftUI

struct MapTools: View {

    @State private var isRotated = false

    var body: some View {
        ZStack {
            Image("wheel")
                .resizable()
                .frame(width: 1, height: 1)
                .foregroundColor(.mFoodColor)
                .scaleEffect(self.isRotated ? 40 : 1)
                .offset(x: self.isRotated ? -60 : 0, y: 0)
                .onTapGesture {
                    withAnimation {
                        self.isRotated.toggle()
                    }
                }

            Image("locationPin")
                .resizable()
                .frame(width: 1, height: 1)
                .foregroundColor(.mFoodColor)
                .scaleEffect(self.isRotated ? 40 : 1)
                .offset(x: self.isRotated ? -60 : 0, y: self.isRotated ? 60 : 0)
                .onTapGesture {
                    withAnimation {
                        self.isRotated.toggle()
                    }
                }

            Image("locationArrow")
                .resizable()
                .frame(width: 1, height: 1)
                .foregroundColor(.mFoodColor)
                .scaleEffect(self.isRotated ? 40 : 1)
                .offset(x: 0, y: self.isRotated ? 60 : 0)
                .onTapGesture {
                    withAnimation {
                        self.isRotated.toggle()
                    }
                }

            Image("mapTools")
                .resizable()
                .frame(width: 40, height: 40)
                .foregroundColor(.mFoodColor)
                .rotationEffect(self.isRotated ? .degrees(90) : .degrees(0))
                .onTapGesture {
                    withAnimation {
                        self.isRotated.toggle()
                    }
                }
            }
        }
}

Anybody see what I am doing wrong?

Answer 1

You have to use different bools for different Images to rotate them. Try with declaring 4 booleans for your four different images to rotate them

@State private var isFirstRotated = false
@State private var isSecondRotated = false
@State private var isThirdRotated = false
@State private var isFourthRotated = false

Answer 2

Figured out that it was interference from another object.