1. Basic usage of ActionSheet
1.1 Implementation
/// 列表提示框
struct ActionsheetBootcamp: View {
@State var showActionSheet: Bool = false
@State var actionSheetOption: ActionSheetOptions = .isOtherPost
/// 定义枚举
enum ActionSheetOptions{
case isMyPost
case isOtherPost
}
var body: some View {
testView1
//testView2
//testView3
}
/// 方式一 基本使用
var testView1: some View{
Button("Click me") {
showActionSheet.toggle()
}
.actionSheet(isPresented: $showActionSheet, content: getActionSheet1)
}
func getActionSheet1() -> ActionSheet{
return ActionSheet(title: Text("This is title"))
}
}
1.2 Effect picture:
2. ActionSheet with title, content and multiple Buttons
2.1 Implementation
// 方式二 带有标题,内容和多个 Button
var testView2: some View{
VStack {
HStack {
Circle()
.frame(width: 30, height: 30)
Text("@username")
Spacer()
Button {
showActionSheet.toggle()
} label: {
Image(systemName: "ellipsis")
}
.accentColor(.primary)
}
.padding()
Rectangle().aspectRatio(1.0, contentMode: .fit) //aspectRatio: 纵横比 fit: 缩放自适应
}
.actionSheet(isPresented: $showActionSheet, content: getActionSheet2)
}
// 创建表单提示框
func getActionSheet2() -> ActionSheet{
//return ActionSheet(title: Text("This is title"))
let button1: ActionSheet.Button = .default(Text("Default"))
let button2: ActionSheet.Button = .destructive(Text("Destructive"))
let button3: ActionSheet.Button = .cancel()
return ActionSheet(
title: Text("This is the title!"),
message: Text("This is the message."),
buttons: [button1, button2, button3])
}
2.2 Effect picture:
3. ActionSheet enumeration type prompt box
3.1 Implementation
// 方式三 枚举分类型
var testView3: some View{
VStack {
HStack {
Circle()
.frame(width: 30, height: 30)
Text("@username")
Spacer()
Button {
actionSheetOption = .isMyPost
showActionSheet.toggle()
} label: {
Image(systemName: "ellipsis")
}
.accentColor(.primary)
}
.padding()
Rectangle().aspectRatio(1.0, contentMode: .fit) //aspectRatio: 纵横比 fit: 缩放自适应
}
.actionSheet(isPresented: $showActionSheet, content: getActionSheet3)
}
// 创建表单提示框
func getActionSheet3() -> ActionSheet{
let shareButton: ActionSheet.Button = .default(Text("Share")) {
// add code to share post
}
let reportButton: ActionSheet.Button = .destructive(Text("Report")) {
// add code to report this post
}
let deleteButton: ActionSheet.Button = .destructive(Text("Delete")) {
// add code to delete this post
}
let cancelButton: ActionSheet.Button = .cancel()
let title: String = "What woud you like to do?"
switch actionSheetOption{
case .isOtherPost:
return ActionSheet(
title: Text(title),
message: nil,
buttons: [shareButton, reportButton, cancelButton])
case .isMyPost:
return ActionSheet(
title: Text(title),
message: nil,
buttons: [shareButton, reportButton, deleteButton, cancelButton])
}
}
3.2 Effect picture: