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?