SwiftUI - Alert 的使用

在 SwiftUI 中，可以使用专用的视图修饰符来直接展示 Alert 的视图，它的工作方式和传统的 UIKit 略有不同，但你可以很快的习惯使用他们。

在本文中，我们将讲解如何使用 SwiftUI 的 Alert 函数。

如何使用

首先，我们来看下如何使用 SwiftUI 的 Alert 函数。

SwiftUI 为呈现 Alert 视图提供了几个视图修饰符。它们都需要一个 isPresented 绑定来管理可见性状态。一个带有标题和消息的简单示例如下：

struct ContentView: View {
    @State private var isPresented: Bool = false
    
    var body: some View {
        Button("弹出 Alert") {
            isPresented = true
        }.alert("Alert 标题", isPresented: $isPresented, actions: {
        }, message: {
            Text("Alert 消息")
        })
    }
}

上述代码声明了一个 isPresented 的状态变量用于控制 Alert 视图的展示与隐藏。然后在 body 中创建一个按钮，按钮的点击事件用于将状态变量赋值为 true 从而弹出 Alert 视图。

通过 .alert 修饰符来配置 Alert 视图的标题和消息内容，并且将状态变量 isPresented 与其绑定。

点击按钮的效果图如下：

当然，你也可以在 actions 中配置更复杂的 Alert 视图：

struct ContentView: View {
    @State private var isPresented: Bool = false
    
    var body: some View {
        Button("弹出 Alert") {
            isPresented = true
            // 下面的状态变量前请添加刀乐符号，这里不添加的原因是加上之后掘金的字数统计会出错。。。。
        }.alert("Alert 标题", isPresented: isPresented, actions: {
            Button(role: .destructive) {
            } label: {
                Text("删除")
            }
            Button("取消", role: .cancel) {
            }
            Button("确定") {
            }
        }, message: {
            Text("Alert 消息")
        })
    }
}

效果图如下：

注意，如果你在你的 actions 中使用了一个重要操作的按钮，需要再提供一个取消按钮。这是为了确保用户有办法取消和退出。

使用输入对象填充 SwiftUI 的 Alert数据

你可以通过传入特定对象来进一步增强 Alert 的功能。例如，你可能希望在 Alert 中使用已发布的文章：

struct Article {
    let title: String
    let url: String
}

struct ContentView: View {
    @State private var isPublished: Bool = false
    let article: Article
    
    @Environment(\.openURL) private var openURL
    
    var body: some View {
        Button("发布文章") {
            isPublished = true
            // 下面的状态变量前请添加刀乐符号，这里不添加的原因是加上之后掘金的字数统计会出错。。。。
        }.alert("文章已发布", isPresented: isPublished, presenting: article, actions: { article in
            
            Button("查看文章") {
                openURL(URL(string: article.url)!)
            }
            .keyboardShortcut(.defaultAction)
            Button("OK") { }
        }, message: { article in
            Text("文章 '\(article.title) 已经发布")
        })
    }
}

#Preview {
    ContentView(article: Article(title: "标题", url: "url"))
}

上述代码构建了结构体 Article 用来表示文章。声明了发布文章按钮，点击之后会弹出已发布成功的 Alert，并且可以通过查看文章的按钮直接去阅读文章。

我们还在keyboardShortcut修饰符中使用 defaultAction，使查看已发布的文章成为要执行的默认操作。这也将使按钮以加粗的字体显示。

效果图如下：

总结

使用可用的视图修饰符，我们可以用几种方式呈现 SwiftUI 的 Alert 视图。我们还可以自定义动作、标题和消息。传入一个特定对象来动态填充数据也很方便。