SwiftUI:Alert 弹窗

如果发生重要事件,通知用户的一种常见方法是使用警报Alert弹窗-根据您的需要,该弹出窗口包含标题,消息和一个或两个按钮。

但是请考虑一下:何时应该显示警报以及如何显示Alert?视图是我们程序状态的函数,Alert也不例外。因此,我们不用说“显示警报”,而是创建警报并设置显示警报的条件。

基本的SwiftUIAlert具有标题,消息和一个关闭按钮,如下所示:

Alert(title: Text("Hello SwiftUI!"),
      message: Text("This is some detail message"),
      dismissButton: .default(Text("OK")))

如果需要,您可以添加更多代码以更详细地配置按钮,但这已经足够。更有趣的是我们如何显示警报:我们不将警报分配给变量,然后编写诸如myAlert.show()之类的东西,因为这将回到旧的“一系列事件”的思维方式。

相反,我们创建一些状态来跟踪警报是否显示,如下所示:

@State private var showingAlert = false

然后,我们将警报附加到用户界面的某处,告诉它使用该状态来确定是否显示警报。SwiftUI将观察showingAlert,并在它变为true时立即显示警报。

将按钮和他们放在一起,下面是一些示例代码,当点击按钮时会显示警报:

struct ContentView: View {
    @State private var showingAlert = false
    
    var body: some View {
        Button("Show Alert") {
            self.showingAlert = true
        }
        .alert(isPresented: $showingAlert) {
            Alert(title: Text("Hello SwiftUI!"),
                  message: Text("This is some detail message"),
                  dismissButton: .default(Text("OK")))
        }
    }
}

这会将警报附加到按钮上,但是说实话,在哪里使用alert()修饰符都没关系——我们要做的就是让Alert存在,并且在showAlert为true时显示。

仔细看看alert()修饰符:

.alert(isPresented: $showingAlert)

这是另一种双向数据绑定,这是因为SwiftUI会在警报解除后自动将showingAlert设置为false。

这是该项目概述的最后一部分,因此是开始使用真实代码的时候了。如果要保存已编程的示例,则应将项目目录复制到其他位置。

准备就绪后,将ContentView.swift重置成您最初创建项目时的开始方式,这样我们就可以从头开始。

参考
SwiftUI:ActionSheet 弹窗
SwiftUI:Sheet 视图
译自
Showing alert messages

Previous: 按钮和图片 Hacking with iOS: SwiftUI Edition Next: 猜国旗项目

赏我一个赞吧~~~

你可能感兴趣的:(SwiftUI:Alert 弹窗)