在 SwiftUI 中，Alert 是用来展示提示框的主要方式。它能够显示一条信息和一组按钮以供用户选择。
基本使用
以下是最简单的 Alert 示例，用于显示标题、信息和一个按钮。
@State private var showAlert = false
var body: some View {
VStack {
Button("显示提示框") {
showAlert = true
}
.alert("提示框标题", isPresented: $showAlert) {
Button("确定", role: .cancel) {}
} message: {
Text("这是提示框的内容信息。")
}
}
}
带多个按钮的 Alert
如果需要提供多个操作选项，可以在 buttons 中添加多个按钮。
@State private var showAlert = false
var body: some View {
VStack {
Button("显示提示框") {
showAlert = true
}
.alert("警告", isPresented: $showAlert) {
Button("确定") {
print("点击了确定")
}
Button("删除", role: .destructive) {
print("点击了删除")
}
Button("取消", role: .cancel) {
print("点击了取消")
}
} message: {
Text("你确定要继续吗？")
}
}
}
动态内容的 Alert
通过绑定变量，可以动态更新提示框的内容：
@State private var showAlert = false
@State private var alertTitle = "默认标题"
@State private var alertMessage = "默认消息"
var body: some View {
VStack {
Button("显示提示框") {
alertTitle = "动态标题"
alertMessage = "这是动态生成的提示内容！"
showAlert = true
}
.alert(alertTitle, isPresented: $showAlert) {
Button("确定") {}
} message: {
Text(alertMessage)
}
}
}带输入框的提示框
SwiftUI 的原生 Alert 不支持直接嵌入输入框。如果需要在提示框中添加输入框，可以结合 TextField 和 Sheet 或自定义视图来实现：
@State private var showSheet = false
@State private var userInput = ""
var body: some View {
VStack {
Button("显示输入框提示") {
showSheet = true
}
}
.sheet(isPresented: $showSheet) {
VStack {
Text("请输入内容")
TextField("在此输入", text: $userInput)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
Button("确定") {
print("用户输入：\(userInput)")
showSheet = false
}
.padding()
}
.padding()
}
}实际上调用Sheet页填写内容。
绑定一个Bool和Identifiable对象
alert 的显示可以绑定到一个布尔值，并通过 presenting: 传递一个可选的 Identifiable 对象。
示例代码：
import SwiftUI
struct User: Identifiable {
var id = "Fang jun yu"
}
struct ContentView: View {
@State private var selectedUser: User? = nil
@State private var isShowingUser = false
var body: some View {
Button("Tap Me") {
selectedUser = User() // 设置有效的 User 实例
isShowingUser = true // 触发 alert 显示
}
.alert("Welcome", isPresented: $isShowingUser, presenting: selectedUser) { user in
Button(user.id) { }
}
}
}运行结果：
点击按钮后会弹出一个警告框，按钮文本为 “Fang jun yu”。
注意：如果selectedUser 的值始终是 nil，user.id 将无法被显示。因此在Button中设置User实例后，user.id才得到显示。
message修饰符
在 SwiftUI 的 .alert 修饰符中，message 参数是特定于这个修饰符的，表示一个额外的文本内容，用于补充说明提示框的主题。
.alert("标题", isPresented: $showAlert, actions: {
Button("确认", role: .destructive) { }
Button("取消", role: .cancel) { }
}, message: {
Text("补充说明内容")
})
message 的用途
1、可选参数: 如果没有需要补充的说明，可以省略。
2、显示样式: message 的文本会比 title 的文本小，通常显示在 title 的下方。
总结
Alert 适合用于简单的提示或确认操作。
对于复杂的内容（如输入框），建议结合 Sheet 或 Modal 自定义界面。
按钮的 role 属性可以标记为 .cancel 或 .destructive，以更好地适配 iOS 设计规范。
更多知识
Button 的 role 属性
在 SwiftUI 中，Button 的 role 属性用于为按钮提供语义角色，以便操作系统能够识别按钮的用途，并在需要时进行视觉或功能上的适配（例如危险操作按钮的红色样式）。目前，ButtonRole 枚举提供了以下三种角色：
1、.cancel
用途: 表示取消操作的按钮，通常在用户希望放弃当前操作时使用。
效果: 操作系统可能会赋予该按钮更柔和的视觉效果，以表明它是一个安全操作。
示例
Button("取消", role: .cancel) {
print("取消操作")
}2、destructive
用途: 表示危险操作的按钮，例如删除或清除重要数据。
效果: 按钮通常会显示为红色（在 iOS 上），以提醒用户该操作可能带来不可逆的后果。
示例
Button("删除", role: .destructive) {
print("执行删除操作")
}3、nil
用途: 如果不指定 role，默认为 nil，表示普通按钮。
效果: 按钮会保持常规样式。
示例
Button("普通按钮") {
print("普通按钮操作")
}系统支持的优化
1、动态更新样式:
使用 .cancel 或 .destructive，系统会自动根据上下文或平台设计语言（如 iOS、macOS）调整按钮的样式。
2、无障碍支持:
系统会通过 role 提供额外的语义信息，方便屏幕阅读器（如旁白）提示用户按钮的作用。
