SwiftUI中如何使用.ultraThinMaterial实现无浅色tint的背景模糊？

问题描述 #

使用.ultraThinMaterial实现视图背景模糊时，会自动添加浅色/白色tint，导致原本深色背景上的内容整体变亮。即使显式将环境配色设为.light，也只能达到相对最暗的效果，尝试使用混合模式还会直接移除模糊效果。

当前实现代码：

import SwiftUI

struct ModalLayoutBackdrop: View {
  var body: some View {
    ZStack {
      content
      VStack {}
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .environment(\.colorScheme, .light)
        .background(.ultraThinMaterial)
    }
  }
}

效果对比图：

解决方案 #

可以通过以下两种方式实现无tint的纯模糊效果：

方法1：封装UIKit的UIVisualEffectView实现纯模糊 #

SwiftUI的Material背景自带tint，而UIKit的UIBlurEffect可以更精准控制tint表现。封装一个纯模糊的自定义View：

import SwiftUI

struct PureBlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style = .systemUltraThinMaterial
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        let blurEffect = UIBlurEffect(style: style)
        let view = UIVisualEffectView(effect: blurEffect)
        // 移除默认tint，设置背景透明
        view.backgroundColor = .clear
        return view
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}

// 使用示例
struct ModalLayoutBackdrop: View {
    var body: some View {
        ZStack {
            content
            PureBlurView(style: .systemUltraThinMaterial)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

方法2：调整Material背景的透明度与混合模式 #

如果不想依赖UIKit，可以通过微调透明度和混合模式弱化tint，同时保留模糊效果：

struct ModalLayoutBackdrop: View {
    var body: some View {
        ZStack {
            content
            VStack {}
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(.ultraThinMaterial.opacity(0.8))
                .blendMode(.overlay)
        }
    }
}

注：这种方式需要根据实际背景色微调透明度和混合模式参数，确保tint被弱化到几乎不可见。

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