ios - 如何使VStack可单击以在SwiftUI中显示警报

我有一个带有图像和文本的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

}

最佳答案

我已将您的代码简化为仅包含基本内容。您实际上不需要添加轻击手势，可以将整个元素(例如VStack)包装在Button中，并从那里处理触发警报的操作。重要的一点是要记住，当用户在showConnectionAlert上点击OK时，将Alert设置为false。将其包装在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 }))
        }
    }
}