如何使 VStack 可点击以在 SwiftUI 中显示警报

Question

我有一个带有图像和文本的 VStack，我需要使它可点击，以便我可以向用户显示和提醒。我已经尝试过 onTapGesture 方法，但我可以打印语句，但没有显示警报。

有没有其他方法可以获得解决方案？

我已经添加了整个 swift 文件供您参考

代码

@State private var hasOneConnected: Bool = false
@State private var showConnectionAlert = false

private var connectionAlert: Alert {
    Alert.init(title: Text("Oops!"), message: Text("There is an error."), dismissButton: .default(Text("OK")))
}
var body: some View {
    VStack(alignment: .center, spacing: 0) {

        // MARK: - Header
        VStack(alignment: .center, spacing: 0) {
            Spacer().frame(height: 55)
            HStack(alignment: .center, spacing: 25) {
                Spacer()
                Image("Logo")
                Spacer(minLength: 5)
                Text("Zone Control")
                    .foregroundColor(.white)
                Spacer()
            }
            Spacer()
        }
        .frame(height: 100, alignment: .center)
        .background(
            LinearGradient(
                gradient: Gradient(colors: [Color.Heat.primary, Color.Heat.primary.opacity(0.8), Color.Heat.primary.opacity(0.5)]),
                startPoint: .top, endPoint: .bottom
            )
        )
        // MARK: - Menu Bar
        HStack(alignment: .center, spacing: 10) {
            Spacer().frame(maxWidth: 20)

            HStack(alignment: .center, spacing: 10) {
                Image("batteryModule")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 8)
                Text("Pod Status")
                    .font(.caption)
                    .foregroundColor(.white)
            }

            Spacer()

            VStack(alignment: .center, spacing: 4) {
                Image(self.hasConnected ? "bluetoothConnected" : "bluetoothNotConnected")
                Text(self.hasConnected ? "Connected" : "Disconnected")
                    .font(.caption)
                    .foregroundColor(.white)
            }
            .frame(width: 80)

            VStack(alignment: .center, spacing: 4) {
                Image("batteryStatus")
                Text("\(self.batteryLevel)%")
                    .font(.caption)
                    .foregroundColor(.white)
            }
            .frame(width: 60)

            Spacer().frame(maxWidth: 10)
        }
        .padding()
        .background(Color.black)

    }

    .statusBar(hidden: true)
    .edgesIgnoringSafeArea(.all)
    .onAppear(perform: {
        UserDefaults.standard.set(true, forKey: "onboarding")
        self.update()
    })
        .onReceive(self.skiinBLE.objectWillChange) { _ in
            self.update()
    }

}

func update() {
    self.hasOneConnected = self.topLayer.cbPeripheral?.state != .disconnected
    self.batteryLevel = self.topLayer.moduleInformation?.batteryLevel.rawValue ?? 0

}

Answer 1

为了使空容器可点击（例如 Spacer()），您应该使用.contentShape(Rectangle())修饰符：

VStack(spacing: 4) {
  Image(systemName: "antenna.radiowaves.left.and.right")
  Text("Connected")
  Spacer()
}
.contentShape(Rectangle())
.onTapGesture {
  print("The whole VStack is tappable now!")
}

Answer 2

我已将您的代码简化为基本要素。您实际上并不需要添加点击手势，您可以将整个元素（例如 a VStack）包装在 a 中Button并处理从那里触发警报。重要的一点是记住showConnectionAlert当用户在Alert. 将它包裹在 a 中的副作用Button是里面的所有东西都将以淡色呈现。这就是为什么我申请的.foregroundCololor()到VStack（有一些图片，你可能还需要添加.renderingMode(.original)改性剂）：

struct ContentView: View {

    @State private var showConnectionAlert = false

    var body: some View {
        Button(action: { self.showConnectionAlert = true }) {
            VStack(spacing: 4) {
                Image(systemName: "antenna.radiowaves.left.and.right")
                Text("Connected")
            }   .foregroundColor(.primary)
        }
            .alert(isPresented: $showConnectionAlert) {
                    Alert(title: Text("Nice"),
                          message: Text("The alert is showing!"),
                          dismissButton: Alert.Button.default(Text("OK"),
                                                              action: { self.showConnectionAlert = false }))
        }
    }
}