Alert 提示框的使用

article/2025/10/4 12:55:25

1. Alert 基本的使用

1.1 实现

/// 提示框
struct AlertBootcamp: View {@State var showAlert: Bool = false@State var alertType: MyAlerts? = nil@State var alertTitle: String = ""@State var alertMessage: String = ""@State var backgroundColor: Color = Color.yellowenum MyAlerts{case sucesscase error}var body: some View {testView1//testView2//testView3}// 方式一 基本提示框操作var testView1: some View{ZStack {// 背景颜色backgroundColor.ignoresSafeArea()// 按钮点击Button("Click here") {showAlert.toggle()}//Presented 展现.alert(isPresented: $showAlert) {getAlert1()}}}//获取提示框func getAlert1() -> Alert{//Alert(title: Text("There was an error"))return Alert(title: Text("This is the title"),message: Text("Here we will describe the error"),//Alert.Button.destructive(Text("Delete")primaryButton: .destructive(Text("Delete"), action: {backgroundColor = .red}),secondaryButton: .cancel())}
}

1.2 效果图:

2. Alert 提示框修改其内容

2.1 实现

// 方式二 提示框修改其内容
var testView2: some View{ZStack {// 背景颜色backgroundColor.ignoresSafeArea()// 按钮点击VStack {Button("Button 1") {alertTitle = "Error uploading video"alertMessage = "The video could not be uploaded"showAlert.toggle()}.padding()Button("Button 2") {alertTitle = "Successfully uploaded video 🥳"alertMessage = "Your video is now public!"showAlert.toggle()}}.alert(isPresented: $showAlert, content: getAlert2)}
}// 获取提示框
func getAlert2() -> Alert{return Alert(title: Text(alertTitle),message: Text(alertMessage),dismissButton: .default(Text("OK")))
}

2.2 效果图:

3. Alert 以枚举的方式显示

3.1 实现

// 方式三，以枚举的方式显示提示框
var testView3: some View{ZStack {// 背景颜色backgroundColor.ignoresSafeArea()// 按钮点击VStack {Button("Button 1") {alertType = .errorshowAlert.toggle()}.padding()Button("Button 2") {alertType = .sucessshowAlert.toggle()}}.alert(isPresented: $showAlert, content: getAlert3)}
}func getAlert3() -> Alert{switch alertType{case .error:return Alert(title: Text("There was an error!"))case .sucess:return Alert(title: Text("This was a success"), message: nil, dismissButton: .default(Text("OK"), action: {backgroundColor = .green}))default:return Alert(title: Text("Error"))}
}