SwiftUI: Perform a different action when clicking the area around a button

Question

I'm relatively new to SwiftUI and was looking for some assistance.

I currently have a button that looks and does what I'm looking for it to do (code below). I'm trying to add a functionality so that when I click the black screen around the button another action is performed that is different to clicking the green button. Essentially clicking the green button should move the view to a new screen (which it does) and clicking the black area around the button should make the view go back to the old screen - acts as a fail safe in case the green button has shown when it wasn't intended

The code that I currently have can be seen below

    Button("START") {
        secondHalfTimerShowing.toggle()
        secondHalfButtonShowing.toggle()
    }
    .buttonStyle(StartButtonGreen1())
    .transition(.scale)

It does what I need it to do but as I said the area surrounding the button needs to do something else by toggling different views to on and some to off. The screenshot of the green button is shown below where I want to click any of the black surrounding screen to revert back to the old view.

Screenshot of current view with green button in the centre:

Answer 1

You can use Color.black.edgesIgnoringSafeArea(.all) to create a black background and add .onTapGesture {} to detect clicks

Example complete code:

import SwiftUI

enum Page {
  case oldPage
  case startPage
  case nextPage
}

struct ContentView: View {
  @State private var pageNow: Page = .startPage
  
  var body: some View {
    switch pageNow {
    case .oldPage: 
      OldPage(pageNow: $pageNow)
    case .startPage:
      StartPage(pageNow: $pageNow)
    case .nextPage: 
      NextPage(pageNow: $pageNow)
    }
  }
}

struct OldPage: View {
  @Binding var pageNow: Page
  var body: some View {
    Button("Go to Start Page") {
      withAnimation {
        pageNow = .startPage
      }
    }
    .buttonStyle(PlainButtonStyle())
  }
}

struct StartPage: View {
  @Binding var pageNow: Page
  var body: some View {
    ZStack(alignment: .center) {
      Color.black.edgesIgnoringSafeArea(.all)
        .onTapGesture {
          withAnimation {
            pageNow = .oldPage
          }
        }
      
      Button(action: {
        withAnimation {
          pageNow = .nextPage
        }
      }) {
        Text("START")
          .bold()
          .font(.title2)
          .foregroundStyle(.black)
          .padding(50)
          .background(Circle().fill(Color.green))
      }
      .buttonStyle(PlainButtonStyle())
      .ignoresSafeArea()
    }
  }
}

struct NextPage: View {
  @Binding var pageNow: Page
  var body: some View {
    Button(action: {
      withAnimation {
        pageNow = .startPage
      }
    }) {
      Text("This is the new screen after tapping START")
        .foregroundColor(.white)
        .background(Color.green)
    }
    .buttonStyle(PlainButtonStyle())
  }
}

#Preview {
  ContentView()
}