如何在SwiftUI中实现高强度模糊效果？

我正在开发一款应用，想要实现高强度的模糊效果，但当前制作的原型效果不理想，以下是我的代码：

struct BlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style
    var opacity: Double
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: style))
        blurView.clipsToBounds = true
        blurView.alpha = CGFloat(opacity)
        return blurView
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
        uiView.alpha = CGFloat(opacity)
    }
}


struct Hintergrund: View {
    var body: some View {
        ZStack {
            BlurView(style: .systemUltraThinMaterialLight, opacity: 0.7)
            
            LinearGradient(gradient: Gradient(stops: [
                .init(color: .white.opacity(0), location: 0),
                .init(color: .white.opacity(0.1), location: 0.1),
                .init(color: .white.opacity(0.5), location: 0.5),
                .init(color: .white.opacity(0.5), location: 0.9), // 修改最后一个控制点的位置
                .init(color: .white.opacity(0), location: 1),
            ]), startPoint: .topLeading, endPoint: .bottomTrailing)
            .cornerRadius(10)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            LinearGradient(gradient: Gradient(stops: [
                .init(color: .white.opacity(0), location: 0),
                .init(color: .white.opacity(0.1), location: 0.5),
                .init(color: .white.opacity(0), location: 1),
            ]), startPoint: .topTrailing, endPoint: .bottomLeading)
            .cornerRadius(10)
            .frame(maxWidth: .infinity, maxHeight: .infinity) 
        }
    }
}

改进方案 #

1. 更换模糊材质风格 #

你当前使用的.systemUltraThinMaterialLight是最轻薄的模糊材质，想要高强度模糊，建议选择更厚重的预设风格：

• .systemMaterialLight：标准级厚重模糊
• .systemThickMaterialLight：强度更高的厚重模糊
• .systemChromeMaterialLight：类Chrome界面的强模糊效果

2. 移除透明度设置 #

不要通过alpha降低模糊视图的透明度，这会直接削弱模糊效果。若需调整视觉强度，可尝试叠加多层模糊视图，或降低后续渐变层的透明度。

3. 简化BlurView实现 #

优化后的BlurView代码更简洁，同时保证效果正常更新：

struct BlurView: UIViewRepresentable {
    let style: UIBlurEffect.Style
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        UIVisualEffectView(effect: UIBlurEffect(style: style))
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}

4. 调整渐变层的遮挡影响 #

你当前叠加的两层渐变会覆盖在模糊层上方，导致模糊效果被淡化。若需保留渐变效果，建议降低渐变颜色的透明度：

struct Hintergrund: View {
    var body: some View {
        ZStack {
            // 使用高强度模糊材质
            BlurView(style: .systemThickMaterialLight)
            
            // 降低渐变透明度，减少对模糊层的遮挡
            LinearGradient(gradient: Gradient(stops: [
                .init(color: .white.opacity(0), location: 0),
                .init(color: .white.opacity(0.05), location: 0.1),
                .init(color: .white.opacity(0.2), location: 0.5),
                .init(color: .white.opacity(0.2), location: 0.9),
                .init(color: .white.opacity(0), location: 1),
            ]), startPoint: .topLeading, endPoint: .bottomTrailing)
            .cornerRadius(10)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            LinearGradient(gradient: Gradient(stops: [
                .init(color: .white.opacity(0), location: 0),
                .init(color: .white.opacity(0.05), location: 0.5),
                .init(color: .white.opacity(0), location: 1),
            ]), startPoint: .topTrailing, endPoint: .bottomLeading)
            .cornerRadius(10)
            .frame(maxWidth: .infinity, maxHeight: .infinity) 
        }
    }
}

额外选项：使用高斯模糊滤镜 #

若系统预设材质仍达不到预期强度，可直接使用GaussianBlur滤镜，通过调整半径参数控制模糊强度：

struct HighIntensityBlurView: View {
    // 半径越大，模糊强度越高
    var blurRadius: CGFloat = 20
    
    var body: some View {
        // 替换为你需要模糊的背景内容
        Image("background-image")
            .resizable()
            .scaledToFill()
            .cornerRadius(10)
            .blur(radius: blurRadius)
    }
}

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