SwiftUI Background Blur

“磨砂玻璃效果开始于 iOS 7 ，最近更多地用于 glassmorphism 趋势。要在 SwiftUI 中创建这种背景模糊效果，需要使用苹果提供的示例代码并应用 BlurView。

导入视觉效果模糊

苹果提供了来自其 Fruta 应用的示例代码。我们需要从 iOS 文件夹中将 VisualEffectBlur.swift 拖放到我们的项目文件中，放在ContentView.swift旁边。

注意：macOS 也有一个单独的VisualEffectBlur.swift。

背景模糊

VisualEffectBlur 可以像 shape 一样使用。它将占据最大的空间。默认样式是 systemMaterial，它会自动调整为深色模式。

VisualEffectBlur(blurStyle: .systemMaterial)

注意：最好在 iOS 模拟器或设备上查看模糊效果。预览显示不够准确。

模糊可以设置为不同级别，从轻到重依次为：

.systemThickMaterial
.systemMaterial
.systemThinMaterial
.systemUltraThinMaterial
.systemChromeMaterial

常见用法

背景模糊的常见用法是将其放在 ZStack 中，位于背景视图之上，模态视图之下。

ZStack {
    BackgroundView()
    VisualEffectBlur()
    ModalView()
}

在 background 修饰符中使用VisualEffectBlur也是个好主意。

VStack {}
.background(VisualEffectBlur())

最终示例

ZStack {
    RoundedRectangle(cornerRadius: 20)
        .fill(Color.blue)
        .padding()
    VisualEffectBlur(blurStyle: .systemMaterial)
        .ignoresSafeArea()
    RoundedRectangle(cornerRadius: 20)
        .fill(Color.white)
        .frame(width: 300, height: 400)
        .shadow(color: Color.black.opacity(0.3), radius: 20, x: 0, y: 10)
}

源码下载: https://github.com/MFiOS/BackgroundBlur