Overlay views one by one in SwiftUI - swiftui

Question

I have the following code with a struct and two views. On tap of the firstScreenOverlay button i want to show the secondScreenOverlay and hide the previous one and so on. Any help appreciated!
import SwiftUI
struct ContentView: View {
var body: some View {
Text("hello there")
.overlay(firstScreenOverlay, alignment: .center)
}
}
private var firstScreenOverlay: some View {
ZStack {
Color.blue
.opacity(0.5)
Button {} label: {
Text("Next")
.fullWidth()
}
}
}
private var secondScreenOverlay: some View {
ZStack {
Color.red
.opacity(0.5)
}
}

Answer 1

You just need a way to keep track of what is showing. You can use a variable and an enum
import SwiftUI
struct DynamicOverlay: View {
//Keeps track of what is showing
#State var selectedOverlay: OverlayViews = .none
var body: some View {
VStack{
Text("hello there")
//Button changes what is being displayed
Button("first", action: {
selectedOverlay = .first
})
}
//Displays the selected view
.overlay(selectedOverlay.view($selectedOverlay), alignment: .center)
}
}
enum OverlayViews{
case first
case second
case none
//Holds all the options for the views
#ViewBuilder func view(_ selectedView: Binding<OverlayViews>) -> some View{
switch self{
case .first:
ZStack {
Color.blue
.opacity(0.5)
Button {
selectedView.wrappedValue = .second
} label: {
Text("Next")
}
}
case .second:
ZStack {
Color.red
.opacity(0.5)
Button("home") {
selectedView.wrappedValue = .none
}
}
case .none:
EmptyView()
}
}
}
struct DynamicOverlay_Previews: PreviewProvider {
static var previews: some View {
DynamicOverlay()
}
}