SwiftUI：单击按钮周围的区域时执行不同的操作

Question

我对 SwiftUI 比较陌生，正在寻求一些帮助。

我目前有一个按钮，它的外观和功能符合我的要求（代码如下）。我正在尝试添加一项功能，以便当我单击按钮周围的黑屏时，会执行与单击绿色按钮不同的另一个操作。本质上，单击绿色按钮应该将视图移动到新屏幕（确实如此），单击按钮周围的黑色区域应该使视图返回到旧屏幕 - 充当故障安全装置，以防绿色按钮显示时这不是故意的

我目前拥有的代码可以在下面看到

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

它做了我需要它做的事情，但正如我所说，按钮周围的区域需要通过打开不同的视图和关闭一些视图来执行其他操作。绿色按钮的屏幕截图如下所示，我想单击任何黑色周围的屏幕以恢复到旧视图。

Answer 1

您可以使用

 Color.black.edgesIgnoringSafeArea(.all)

创建黑色背景并添加

.onTapGesture {}

来检测点击

完整代码示例：

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()
}