SwiftUI Alert处理按钮形式的默认机制

问题描述

在Xcode中，尝试添加一个Alert提示框，但是在添加过程发现一个问题。

当我在Alert中添加一个Button时，没有取消按钮。但是当我添加另外一个取消按钮时，就会多显示一个取消按钮。

.alert("Delete prompt",isPresented: $deletePrompt){
    Button("Confirm") {
         modelContext.delete(piggyBank[currentIndex])
         do {
             try modelContext.save() // 提交上下文中的所有更改
         } catch {
             print("保存失败: \(error)")
         }
     }
     Button("Cancel", role: .destructive) {
         deletePrompt.toggle()
     }
 } message: {
     Text("Are you sure you want to delete this piggy bank?")
 }

截图中alert中有两个Button，但是显示了三个按钮。

当隐藏掉另一个Button时，Alert却只显示一个按钮。

默认机制

经过查询资料，了解到这是SwiftUI 的 alert 在处理按钮行为时的一个默认机制。

1、系统默认行为

如果 alert 只提供一个按钮，SwiftUI 默认不会显示额外的取消按钮，因为视图只有一个操作选项。

如果 alert 提供两个或更多按钮，并且其中没有一个明确指定 role 为 .cancel，SwiftUI 会自动添加一个系统默认的 “取消” 按钮。

2、按钮的 role 参数

按钮的 role 会告诉 SwiftUI 该按钮的行为是什么，例如 .cancel 表示取消操作，.destructive 表示有潜在破坏性的操作。

当明确指定了一个 .cancel 按钮时，SwiftUI 不会再添加额外的 “取消” 按钮。

因此，在隐藏的代码中明确指明按钮是role: .destructive，而没有指明一个.cancel按钮时，SwiftUI会单独添加额外的取消按钮。

解决方案

因为Alert主要处理是否删除的操作，因此我只需要将第一个按钮设置为. Destructive，那么SwiftUI就会单独添加一个取消按钮。

.alert("Delete prompt",isPresented: $deletePrompt){
    Button("Confirm", role: .destructive) {
         modelContext.delete(piggyBank[currentIndex])
         do {
             try modelContext.save() // 提交上下文中的所有更改
         } catch {
             print("保存失败: \(error)")
         }
     }
 } message: {
     Text("Are you sure you want to delete this piggy bank?")
 }

这样就解决了Alert按钮形式的默认机制所带来的问题。

相关文章

Swift Alert提示框：https://fangjunyu.com/2024/12/07/swift-alert%e6%8f%90%e7%a4%ba%e6%a1%86/