模糊背景 SwiftUI

在 SwiftUI 中，我们可以为视图添加一个模糊背景，这给用户提供了更好的视觉体验。本文将介绍如何在 SwiftUI 中实现模糊背景效果。

使用 UIBlurEffect

首先，我们可以使用 UIBlurEffect 创建一个模糊效果。在 SwiftUI 中，我们可以将其包装在一个 UIViewRepresentable 中使用。

import SwiftUI

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

此代码中，我们创建了一个 BlurView，并且它具有 style 属性，该属性决定了所需的模糊程度。在 makeUIView 方法中，我们创建了一个 UIBlurEffect 并将其应用于一个 UIVisualEffectView 上，然后将其返回。在 updateUIView 中，我们无需执行任何操作，因此直接忽略即可。

然后我们可以将其用作视图的背景。

struct ContentView: View {
    
    var body: some View {
        ZStack {
            Image("myImage")
                .resizable()
                .scaledToFill()
            
            BlurView(style: .systemMaterialDark)
                .edgesIgnoringSafeArea(.all)
        }
    }
    
}

这里我们使用了 ZStack 将图像和模糊视图叠加在一起，并通过 edgesIgnoringSafeArea(.all) 忽略了安全区域。

自定义模糊视图

如果想要更多地控制模糊效果，我们可以使用 UIBlurEffect 的基本组件之一 UIVibrancyEffect 来创建我们自己的模糊视图。在 SwiftUI 中，我们需要使用 UIViewRepresentable 更改内部视图。

import SwiftUI

struct CustomBlurView: UIViewRepresentable {
    
    let blurStyle: UIBlurEffect.Style
    let vibrancyStyle: UIVibrancyEffectStyle
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        let blurEffect = UIBlurEffect(style: blurStyle)
        let blurView = UIVisualEffectView(effect: blurEffect)
        
        let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect, style: vibrancyStyle)
        let vibrancyView = UIVisualEffectView(effect: vibrancyEffect)
        
        blurView.contentView.addSubview(vibrancyView)
        
        return blurView
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {}
    
}

此代码中，我们首先使用 UIBlurEffect 创建了一个 blurView 并将其的背景设置为模糊。然后我们使用 UIVibrancyEffect 创建 vibrancyView，并将其添加到模糊视图的内容视图中。

我们可以通过以下方式使用自定义模糊视图。

struct ContentView: View {
    
    var body: some View {
        ZStack {
            Image("myImage")
                .resizable()
                .scaledToFill()
            
            CustomBlurView(blurStyle: .systemMaterialDark, vibrancyStyle: .label)
                .edgesIgnoringSafeArea(.all)
        }
    }
    
}

结论

在 SwiftUI 中添加模糊背景非常简单，我们可以使用 UIBlurEffect 或自定义模糊视图来实现所需的效果。这将为用户带来更好的视觉体验，增强软件的可用性。