SwiftUI中如何让.ultraThinMaterial仅实现模糊无底色？

默认的SwiftUI Material背景（如.ultraThinMaterial）会自带一层淡色tint，这就是你看到的淡白色底色。要实现仅保留模糊效果、无内容时完全透明的需求，可以通过自定义基于UIKit的模糊视图来实现：

自定义模糊视图 #

创建一个UIViewRepresentable类型，封装UIKit的UIVisualEffectView并移除自带底色：

struct BlurView: UIViewRepresentable {
    let style: UIBlurEffect.Style
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        let effect = UIBlurEffect(style: style)
        let blurView = UIVisualEffectView(effect: effect)
        // 清除自带底色，仅保留模糊效果
        blurView.backgroundColor = .clear
        return blurView
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {}
}

使用方式 #

用这个自定义BlurView替代原来的.background(.ultraThinMaterial)即可：

struct ExampleView: View {
    var body: some View {
        ScrollView {
            ForEach(0..<50) { index in
                Text("列表项 \(index)")
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.gray.opacity(0.1))
            }
        }
        .overlay(alignment: .top) {
            Text("顶部栏")
                .font(.headline)
                .padding()
                .frame(maxWidth: .infinity)
                // 替换默认Material背景为自定义模糊视图
                .background(BlurView(style: .systemUltraThinMaterial))
        }
    }
}

设置完成后，顶部栏在无内容遮挡时完全透明，只有当下方滚动内容移至其后方时，才会显示出模糊效果，与你期望的效果一致。

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