SwiftUI添加模糊效果

在 SwiftUI 中，可以使用 blur(radius:) 修饰符来设置高斯模糊。这个修饰符适用于任何视图，包括图片、文本、按钮等。以下是一些关于高斯模糊的使用方法和示例：

基础使用

blur(radius:) 的 radius 参数定义模糊的半径，数值越大模糊效果越明显。

Image("fangjunyu")
    .resizable()
    .scaledToFit()
    .blur(radius: 10) // 设置模糊半径为 10
    .frame(width: 300, height: 300)

动态模糊效果

可以使用 @State 或其他绑定值，让模糊效果动态变化。

struct ContentView: View {
    @State private var blurRadius: CGFloat = 0

    var body: some View {
        VStack {
            Slider(value: $blurRadius, in: 0...20, step: 1) {
                Text("模糊强度")
            }
            .padding()

            Image("fangjunyu")
                .resizable()
                .scaledToFit()
                .blur(radius: blurRadius) // 动态调整模糊半径
                .frame(width: 300, height: 300)
        }
    }
}

模糊效果叠加到背景

在 SwiftUI 中，可以将模糊效果叠加到背景中，通常与 ZStack 配合使用。

ZStack {
    Image("fangjunyu")
        .resizable()
        .scaledToFill()
        .frame(width: 400, height: 300)
        .clipped()
        .blur(radius: 10) // 模糊背景图片

    Text("模糊背景示例")
        .font(.largeTitle)
        .foregroundColor(.white)
}
.frame(width: 400, height: 300)

局部模糊

SwiftUI 的 blur 修饰符作用于整个视图。如果需要局部模糊，可以将要模糊的部分单独放入一个容器（例如 ZStack 或 Group）中，再应用模糊效果。

ZStack {
    Image("Mystery")
        .resizable()
        .scaledToFill()
        .frame(width: 300, height: 300)

    Rectangle()
        .fill(Color.gray.opacity(0.3))
        .frame(width: 150, height: 150)
        .blur(radius:5) // 模糊局部区域
}

与 CoreImage 结合实现更多自定义模糊效果

如果需要更复杂的模糊效果（例如方向性模糊或动态模糊），可以使用 CoreImage，将自定义处理的图片返回给 SwiftUI。

import SwiftUI
import CoreImage
import CoreImage.CIFilterBuiltins

struct ContentView: View {
    let context = CIContext()
    let filter = CIFilter.gaussianBlur()

    var body: some View {
        if let uiImage = applyBlur(to: UIImage(named: "example")!) {
            Image(uiImage: uiImage)
                .resizable()
                .scaledToFit()
        }
    }

    func applyBlur(to inputImage: UIImage) -> UIImage? {
        let ciImage = CIImage(image: inputImage)
        filter.inputImage = ciImage
        filter.radius = 10

        guard let outputImage = filter.outputImage,
              let cgImage = context.createCGImage(outputImage, from: ciImage!.extent) else {
            return nil
        }
        return UIImage(cgImage: cgImage)
    }
}

总结

1、简单模糊：直接使用 blur(radius:)。

2、动态模糊：结合 @State 或 Binding 实现动态模糊。

3、自定义模糊：使用 CoreImage 实现更加复杂的模糊效果。