SwiftUI中检测重复Modifier：如何定位重复.alert()修饰符问题

SwiftUI中同一View层级重复添加.alert()修饰符时，系统会直接忽略后续弹窗且无任何提示，排查起来非常麻烦。我们可以通过封装自定义修饰符，结合环境变量追踪弹窗挂载状态，在检测到重复添加时抛出fatalError快速定位问题。

实现步骤 #

1. 定义环境键追踪弹窗状态

创建一个环境键，用来标记当前View层级是否已经挂载了alert：

private struct HasAlertKey: EnvironmentKey {
    static let defaultValue: Bool = false
}

extension EnvironmentValues {
    var hasAlert: Bool {
        get { self[HasAlertKey.self] }
        set { self[HasAlertKey.self] = newValue }
    }
}

2. 封装带检测逻辑的alert修饰符

扩展View，实现两个重载的自定义alert方法，对应原生alert的两种调用形式（isPresented绑定和item绑定）：

extension View {
    func alertWithDuplicateCheck<Content>(
        isPresented: Binding<Bool>,
        content: () -> Content
    ) -> some View where Content: View {
        self.modifier(AlertCheckerModifier(isPresented: isPresented, content: content))
    }
    
    func alertWithDuplicateCheck<Item, Content>(
        item: Binding<Item?>,
        content: (Item) -> Content
    ) -> some View where Item: Identifiable, Content: View {
        self.modifier(ItemAlertCheckerModifier(item: item, content: content))
    }
}

private struct AlertCheckerModifier<Content: View>: ViewModifier {
    let isPresented: Binding<Bool>
    let content: () -> Content
    
    func body(content: Content) -> some View {
        content
            .environment(\.hasAlert, true)
            .alert(isPresented: isPresented, content: self.content)
            .onAppear {
                guard !EnvironmentValues().hasAlert else {
                    fatalError("⚠️ 检测到同一View层级重复添加alert！请检查代码中的重复.alert()调用")
                }
            }
    }
}

private struct ItemAlertCheckerModifier<Item: Identifiable, Content: View>: ViewModifier {
    let item: Binding<Item?>
    let content: (Item) -> Content
    
    func body(content: Content) -> some View {
        content
            .environment(\.hasAlert, true)
            .alert(item: item, content: self.content)
            .onAppear {
                guard !EnvironmentValues().hasAlert else {
                    fatalError("⚠️ 检测到同一View层级重复添加alert！请检查代码中的重复.alert()调用")
                }
            }
    }
}

3. 使用方式

将代码中原有的.alert()替换为.alertWithDuplicateCheck()即可：

struct TestView: View {
    @State private var showAlert1 = false
    @State private var showAlert2 = false
    
    var body: some View {
        VStack {
            Button("显示弹窗1") {
                showAlert1 = true
            }
            Button("显示弹窗2") {
                showAlert2 = true
            }
        }
        // 重复添加会触发fatalError，控制台直接提示问题
        .alertWithDuplicateCheck(isPresented: $showAlert1) {
            Alert(title: Text("弹窗1"))
        }
        .alertWithDuplicateCheck(isPresented: $showAlert2) {
            Alert(title: Text("弹窗2"))
        }
    }
}

原理说明 #

• 环境变量hasAlert会在当前View层级中传递，自定义修饰符在挂载alert前会检查该值：如果已经为true，说明当前View已经有其他alert，直接抛出错误
• 子View中的alert不会触发父View的检测，因为环境值的修改仅作用于当前及子层级，不会向上影响父级

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