SwiftUI:ActionSheet 弹窗
SwiftUI给我们Alert
提供了一个或两个按钮来显示重要的公告,而sheet()
给了我们用于在当前视图的顶部显示整个视图的信息,但是它也为我们提供了ActionSheet
:Alert
的一种替代方案,允许我们添加许多按钮。
视觉上的警报和操作表非常不同:在iPhone上,警报显示在屏幕中央,必须通过选择一个按钮主动将其关闭,而操作表则从底部向上滑动,可以包含多个按钮,并且可以通过点击将其关闭在“取消”上或通过点击操作表外部。
除了弹出方式和不同数量的按钮外,操作表和警报还具有许多功能。两者都是通过在视图层次结构上附加一个修饰符来创建的——用于警报的alert()
和用于操作表的actionSheet()
——当条件为真时,两者都会由SwiftUI自动显示,两者都使用相同类型的按钮,并且都具有一些内置的-这些按钮的默认样式:default()
,cancel()
和destructive()
。
为了演示所使用的操作表,我们首先需要切换某种条件的基本视图。例如,这显示了一些文本,点击文本会更改一个布尔值:
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
}
}
}
现在到了重要的部分:我们需要在文本中添加另一个修饰符,准备好后创建并显示操作表。
就像alert()
一样,我们有一个actionSheet()
修饰符,该修饰符接受两个参数:一个绑定,用于决定当前是否显示该操作表;一个闭包提供应该显示的操作表——通常以尾随形式提供闭包。
我们为操作表提供标题和消息,然后是按钮数组。这些按您提供的顺序垂直堆叠在屏幕上,通常最好在末尾添加一个“取消”按钮——是的,您可以通过点击屏幕上的其他位置来进行取消,但是最好为用户提供明确的选项!
因此,将此修改器添加到您的文本视图中:
.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()
])
}
运行应用程序时,您会发现点击文本会让操作表显示,点击其选项会导致文本的背景色发生变化。
参考
SwiftUI:Alert 弹窗
SwiftUI:Sheet 视图
译自
Showing multiple options with ActionSheet