[SwiftUI 100 天] 用 ActionSheet 显示多个选项

本文主要是介绍[SwiftUI 100 天] 用 ActionSheet 显示多个选项，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

译自 www.hackingwithswift.com/books/ios-s…
更多内容，欢迎关注公众号 「Swift花园」
喜欢文章？不如来个 🔺💛➕三连？关注专栏，关注我 🚀🚀🚀

SwiftUI 提供了 Alert ，用以呈现重要通知，可以支持一到两个按钮，而 sheet() 则是在当前视图之上展示新视图，此外我们还有 ActionSheet：它是 Alert 的替代品，可以让我们添加更多按钮。

视觉上 alerts 和 action sheets 差别很大：在 iPhones，alert 是出现在屏幕中央，并且必须通过选择一个按钮关闭，而 action sheets 是从底部滑出，包含多个按钮，即可以通过点击 Cancel 关闭，也可以点击 action sheet 以外的区域关闭。

除了呈现的外观和按钮数目的差异，action sheets 和 alerts 共享许多相同的功能。两者都是借助 modifier 附加到视图层级 —— alert 用 alert()，而 action sheet 用 actionSheet() —— 两者都是在某个条件成立时由 SwiftUI 自动显示，两者都使用同类的按钮，两者都有一些内建的默认按钮样式：default()，cancel() 和 destructive()。

为了说明 action sheets 的用法，我们首先需要一个基础的视图，用来触发某种条件。例如，先显示某个文本，点击文本时改变一个布尔值：

struct ContentView: View {
    @State private var showingActionSheet = false
    @State private var backgroundColor = Color.white

    var body: some View {
        Text("Hello, World!")
            .frame(width: 300, height: 300)
            .background(backgroundColor)
            .onTapGesture {
                self.showingActionSheet = true
            }
    }
}复制代码

然后是重要的部分：我们需要再添加一个 modifier 到文本视图，创建并显示 action sheet。

和 alert() 一样，actionSheet() modifier 接收两个参数：一个决定当前是否显示 action sheet，一个是提供要显示的 action sheet 的闭包 —— 通常以拖尾闭包的形式提供。

我们要给 action sheet 设置一个标题和一个消息，然后是数组按钮。这些按钮会以你提供它们的顺序竖向地排列，通常我们会把取消按钮放在最后 —— 是的，你可以通过点击屏幕其他地方来关闭，但最好还是给用户保留一个显式的选项。

把这个 modifier 添加到你的文本视图：

.actionSheet(isPresented: $showingActionSheet) {
    ActionSheet(title: Text("Change background"), message: Text("Select a new color"), buttons: [
        .default(Text("Red")) { self.backgroundColor = .red },
        .default(Text("Green")) { self.backgroundColor = .green },
        .default(Text("Blue")) { self.backgroundColor = .blue },
        .cancel()
    ])
}复制代码

运行应用，你应该会发现，点击文本会触发 action sheet 滑入，点击它的按钮选项则导致文本背景色变化。

我的公众号 这里有Swift及计算机编程的相关文章，以及优秀国外文章翻译，欢迎关注～

这篇关于[SwiftUI 100 天] 用 ActionSheet 显示多个选项的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！