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

1,822 阅读2分钟
译自 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及计算机编程的相关文章,以及优秀国外文章翻译,欢迎关注~