SwiftUI视图中多个.alert修饰符仅第二个生效，是否为预期行为？

问题描述 #

在SwiftUI视图中定义两个.alert修饰符，分别绑定不同的@State变量作为显示开关，但点击第一个按钮时，弹出的却是第二个警报，只有第二个按钮的警报能正常工作。我已经通过自定义AlertModel和统一的ViewBuilder逻辑解决了问题，想确认：

• 这属于SwiftUI的预期行为吗？
• 有没有更简洁的实现方式？

原问题代码 #

struct ContentView: View {
    @State var shouldDisplayFirstAlert = false
    @State var shouldDisplaySecondAlert = false

    var body: some View {
        VStack {
            Button(action: { shouldDisplayFirstAlert.toggle() }, label: { Text("Display First") })
            Button(action: { shouldDisplaySecondAlert.toggle() }, label: { Text("Display Second") })
        }
        .padding()
        .alert(isPresented: $shouldDisplayFirstAlert, content: firstAlertBuilder)
        .alert(isPresented: $shouldDisplaySecondAlert, content: secondAlertBuilder)
    }

    func firstAlertBuilder() -> Alert {
        Alert(title: Text("First"), dismissButton: .cancel({ shouldDisplayFirstAlert.toggle() }))
    }

    func secondAlertBuilder() -> Alert {
        Alert(title: Text("Second"), dismissButton: .cancel({ shouldDisplaySecondAlert.toggle() }))
    }
}

已实现的解决方案代码 #

struct AlertModel {
    var text: String
    var action: String
}

struct ContentView: View {
    @State var shouldDisplayAlert = false
    @State var actionTaken = "none"
    @State var alertModel: AlertModel?

    var body: some View {
        VStack {
            Button(action: {
                alertModel = AlertModel(text: "First", action: "First Action")
                shouldDisplayAlert.toggle()}, label: { Text("Display First") })
            Button(action: {
                alertModel = AlertModel(text: "Second", action: "Second Action")
                shouldDisplayAlert.toggle()}, label: { Text("Display second") })
            Text(actionTaken)
        }
        .padding()
        .alert(isPresented: $shouldDisplayAlert, content: alertBuilder)
    }

    func alertBuilder() -> Alert {
        Alert(title: Text(alertModel?.text ?? "none"), dismissButton: .cancel({
            actionTaken = alertModel?.action ?? "none"
            shouldDisplayAlert = false
        }))
    }
}

解答 #

这是预期行为吗？ #

是的，这是SwiftUI的预期行为。SwiftUI的视图修饰符采用叠加覆盖逻辑，当同一个视图上添加多个同类型修饰符时，后面的修饰符会完全覆盖前面的。对于.alert来说，最终只有最后一个绑定的.alert会被视图系统识别，所以无论触发哪个开关，都会显示最后一个定义的警报内容。

更优的实现方式 #

方式1：枚举+单个绑定（类型安全推荐）

通过定义枚举区分不同警报类型，用单个@State变量存储当前要显示的警报（或nil），再通过统一的ViewBuilder生成对应内容，类型安全且逻辑清晰。

enum AlertType: Identifiable {
    case first
    case second
    
    var id: Self { self }
}

struct ContentView: View {
    @State private var currentAlert: AlertType?
    @State private var actionTaken = "none"

    var body: some View {
        VStack {
            Button("Display First") {
                currentAlert = .first
            }
            Button("Display Second") {
                currentAlert = .second
            }
            Text(actionTaken)
        }
        .padding()
        .alert(item: $currentAlert) { alertType in
            switch alertType {
            case .first:
                return Alert(title: Text("First"), dismissButton: .cancel {
                    actionTaken = "First Action"
                })
            case .second:
                return Alert(title: Text("Second"), dismissButton: .cancel {
                    actionTaken = "Second Action"
                })
            }
        }
    }
}

方式2：单个布尔绑定+条件判断（简单场景适用）

如果仅需处理少量简单警报，可以用单个布尔绑定控制显示，在ViewBuilder内通过条件分支返回对应警报内容：

struct ContentView: View {
    @State private var showAlert = false
    @State private var isFirstAlert = false
    @State private var actionTaken = "none"

    var body: some View {
        VStack {
            Button("Display First") {
                isFirstAlert = true
                showAlert = true
            }
            Button("Display Second") {
                isFirstAlert = false
                showAlert = true
            }
            Text(actionTaken)
        }
        .padding()
        .alert(isPresented: $showAlert) {
            isFirstAlert ? 
            Alert(title: Text("First"), dismissButton: .cancel { actionTaken = "First Action" }) :
            Alert(title: Text("Second"), dismissButton: .cancel { actionTaken = "Second Action" })
        }
    }
}

内容的提问来源于stack exchange，提问作者Pavel Yakimenko