Add views to parent swiftui view and then remove them programatically - swift

Question

Right now I've got a parent view written in SwiftUI with some Buttons. What I'd like to happen is to programmatically create and overlay some new child views on top of the entire parent view when the buttons are pressed and then have them fade out, removing them from the view. With SwiftUI being based on state, I'm not sure how to go about this. Would I have to keep track of every view that is created with many at #State variables? My code looks like the following right now:
struct ContentView: View {
var key: String
#State private var touches: [Touch] = []
struct Touch: Identifiable {
let id = UUID()
let location: CGPoint
}
var body: some View {
ZStack {
Color.blue
ripplesLayer
}
.gesture(
DragGesture(minimumDistance: 0)
.onEnded { value in
touches.append(
Touch(location: value.location)
)
}
)
.edgesIgnoringSafeArea(.all)
}
var ripplesLayer: some View {
ForEach(touches.suffix(15)) { touch in
RippleView(key: key)
.position(
x: touch.location.x,
y: touch.location.y
)
}
}
struct RippleView: View {
var key: String
#State private var isHidden = false
#State private var size: CGFloat = 50
var body: some View {
Circle()
.fill(Color.white.opacity(isHidden ? 0 : 0.5))
.frame(width: size, height: size)
.transition(.opacity)
.animation(.easeOut(duration: 0.5))
.onAppear {
Sound.play(file: key, fileExtension: ".wav")
withAnimation {
isHidden = true
size = 200
}
}
}
}
}
I've got this struct that references the ripple child views in the foreach loop as in this answer but don't know how to keep track of multiple disappearing views or even implement it in the first place. Multitouch is enabled and. I want to be able to dynamically create a lot of child views.
struct FreePiano: View {
#State var numberOfPianos = 0
var whiteKeys = ["c1", "d1", "e1", "f1", "g1", "a1", "b1", "c2", "d2", "e2", "f2", "g2", "a2", "b2", "c3"]
var blackKeys = ["c#1", "d#1", "f#1", "g#1", "a#1", "c#2", "d#2", "f#2", "g#2", "a#2"]
var body: some View {
ZStack {
HStack {
VStack {
ForEach(whiteKeys, id: \.self) { whiteKey in
FreePianoKey(numberOfImages: $numberOfPianos, key: whiteKey)
}
}
VStack {
ForEach(blackKeys, id: \.self) { blackKey in
FreePianoKey(numberOfImages: $numberOfPianos, key: blackKey)
}
}
}
ForEach(0 ... numberOfPianos, id, \.self) { _ in
ContentView()
.allowsHitTesting(false)
.frame(width: 300, height: 300)
.position(x: 100, y:100)
}
}
}
}
Would something like SpriteKit be easier for what I'm trying to do?

Answer 1

I do the same thing in my app. In the parent view, I keep a state variable that keeps track of the child views. If your app only allows one view at a time, you could use a state variable that is simply an enum (I call it AppState). Then, as a child view is launched, you would change the AppState.
Alternatively, the state variable could be something more complex, like a stack. Or, in the case of allowing multiple child views at a time, it could be an array of tuples of all child windows and their state (for instance, 0 = closed, 1 = open).