SwiftUI使用.Blur作为ViewModifier为所有视图添加顶层模糊遮罩问题

你对问题的推测是正确的，SwiftUI的blur修饰符默认作用于单个独立渲染单元，当你给父容器添加修饰器时，每个子视图（按钮、文本、背景图）会作为独立单元分别计算模糊效果，不同背景色、透明度的控件模糊采样逻辑不同，所以会出现明显效果差异。
你选择原生blur而非UIBlurEffect的考量合理，原生SwiftUI的模糊效果支持自定义模糊半径，灵活度远高于配置受限的UIBlurEffect。

• 修饰器添加到父ZStack的原始效果：
• 仅背景图片添加修饰器的参考效果：

只需要在BlurModifier中给传入的内容添加.compositingGroup()修饰符，该修饰符会将当前视图及其所有子视图合并为单个渲染层后再做后续处理，就能实现整体统一模糊的效果，同时你原有代码中的修饰符挂载位置有语法错误，需要一并调整。

视图修饰器 #

public enum BlurColor {
    case none
    case light
    case dark
}

import SwiftUI

struct BlurModifier: ViewModifier {
    @Binding private var showBlur: Bool
    @Binding private var blurColor: BlurColor
    // 如需外部调整模糊半径也可改为@Binding对外暴露
    private var blurRadius: CGFloat = 14
    
    public init(showBlur: Binding<Bool>, blurColor: Binding<BlurColor>) {
        self._showBlur = showBlur
        self._blurColor = blurColor
    }
    
    func body(content: Content) -> some View {
        ZStack {
            content
                // 核心修复：将所有子内容合并为单个渲染层再模糊
                .compositingGroup()
                .blur(radius: showBlur ? blurRadius : 0, opaque: true)
                .animation(.easeInOut(duration: 0.3), value: showBlur)
                .edgesIgnoringSafeArea(.all)
                .navigationBarHidden(showBlur)
            
            Rectangle()
                .fill(showBlur ? getBlurColor() : Color.white.opacity(0.0001))
                .edgesIgnoringSafeArea(.all)
        }
    }
    
    private func getBlurColor() -> Color {
        switch blurColor {
        case .none:
            return Color.white.opacity(0.5)
        case .light:
            return Color.white.opacity(0.6)
        case .dark:
            return Color.black.opacity(0.5)
        }
    }
}

主视图 #

主视图无需修改，直接将BlurModifier挂载在父ZStack上即可实现所有内容整体模糊的效果，符合业务需求。

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