SwiftUI中弹窗/警告显示时，如何淡化非强调色视图？

核心思路 #

通过SwiftUI的环境变量传递弹窗/浮层的显示状态，给所有需要淡化的视图统一添加包含颜色滤镜和透明度调整的Modifier，实现全局控制，覆盖普通颜色、表情符号等所有视觉元素。

具体实现步骤 #

1. 定义环境键：用来标记当前是否处于弹窗/浮层激活状态

struct DimmedEnvironmentKey: EnvironmentKey {
    static let defaultValue: Bool = false
}

extension EnvironmentValues {
    var isDimmed: Bool {
        get { self[DimmedEnvironmentKey.self] }
        set { self[DimmedEnvironmentKey.self] = newValue }
    }
}

2. 创建自定义ViewModifier：根据环境变量状态应用淡化效果

struct DimmedViewModifier: ViewModifier {
    @Environment(\.isDimmed) private var isDimmed

    func body(content: Content) -> some View {
        content
            .opacity(isDimmed ? 0.6 : 1.0)
            .colorMultiply(isDimmed ? Color(UIColor.systemGray5) : Color.clear)
    }
}

extension View {
    func dimmedOnOverlay() -> some View {
        self.modifier(DimmedViewModifier())
    }
}

3. 全局应用与状态控制：在根视图层级统一添加Modifier，并绑定弹窗状态到环境变量

struct ContentView: View {
    @State private var showingAlert = false

    var body: some View {
        NavigationStack {
            VStack {
                Text("😀 示例文本")
                    .foregroundColor(.red)
                Button("显示弹窗") {
                    showingAlert = true
                }
            }
            .dimmedOnOverlay()
            .alert("示例弹窗", isPresented: $showingAlert) {
                Button("确定", role: .cancel) {}
            }
            .environment(\.isDimmed, showingAlert)
        }
    }
}

补充细节 #

• 可以调整opacity数值（比如0.5-0.7）和colorMultiply的颜色（比如Color(UIColor.systemBackground).opacity(0.3)），让效果更贴近系统默认的淡化表现。
• 这种方式无需逐个修改子视图，仅在父层级统一配置即可，后续维护成本低。

是否值得处理 #

这个需求并不复杂，实现后能避免局部元素未淡化导致的视觉不协调，提升整体交互体验，完全值得处理。

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