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
}
解决方案
我已将您的代码简化为基本要素。您实际上不需要添加点击手势,您可以将整个元素(例如 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 }))
}
}
}
推荐阅读
- wordpress - 在本地新用户注册的电子邮件上未在 wordpress 中发送
- scala - 在 Scala 中创建临时资源测试文件
- r - R中这行代码的错误可能是什么?
- powershell - 查找字符串的开头和结尾并在 Powershell 中写入 CSV
- python - 如何在 GPU 上运行 numba.jit 修饰函数?
- spring-boot - 如何在 Spring Boot 项目中更改 Tomcat 版本的战争
- typescript - 在 TypeScript 中提示抽象类
- php - 您如何更改 wpallimport 功能
- angular - ionic as pwa with angular/pwa 404 not found
- android - 如何在颤动的if-else条件下赋予图标值颜色变化?