在 SwiftUI 中，blur 是用于给视图添加模糊效果的修饰符，可轻松实现毛玻璃、背景虚化等视觉效果。以下是详细用法和场景示例：
基本语法 #
.blur(radius: CGFloat, opaque: Bool = false)
radius: 模糊半径（值越大越模糊，如10）opaque: 是否优化渲染性能（默认false，设为true时可能提升性能但要求模糊区域不透明）
常见使用场景 #
1. 基础模糊效果 #
Image("background")
.resizable()
.scaledToFill()
.blur(radius: 8) // 图片模糊
2. 模糊叠加文字 #
ZStack {
Image("background")
.blur(radius: 4)
Text("Hello World")
.font(.largeTitle)
.bold()
}
3. 动态模糊（结合 Slider 控制） #
@State private var blurRadius: CGFloat = 0
VStack {
Image("example")
.blur(radius: blurRadius) // 动态模糊
Slider(value: $blurRadius, in: 0...20) // 滑动调整模糊强度
}
4. 局部模糊 + 透明度控制 #
Rectangle()
.fill(.blue)
.frame(width: 200, height: 200)
.blur(radius: 10)
.opacity(0.8) // 模糊后调整透明度
进阶用法 #
模糊形状遮罩 #
用 mask 限定模糊区域：
Image("photo")
.blur(radius: 15)
.mask {
Circle() // 只模糊圆形区域
.frame(width: 200, height: 200)
}
多层模糊叠加 #
组合不同模糊效果：
Text("Depth Effect")
.padding()
.background(.thinMaterial) // 材质模糊
.blur(radius: 2) // 额外模糊层
动画过渡 #
@State private var isBlurred = false
Button("Toggle Blur") {
withAnimation(.easeInOut) {
isBlurred.toggle()
}
}
.blur(radius: isBlurred ? 10 : 0) // 带动画的模糊
注意事项 #
- 性能影响：大半径模糊（如
radius > 20）可能影响渲染性能，尤其在低端设备上。 - 布局行为：
blur不会改变视图的布局尺寸，但可能因视觉效果影响内容展示。 - 与材质效果结合：在 iOS/macOS 上，可结合
.background(.ultraThinMaterial)实现系统级毛玻璃效果（更高效）。
对比 UIKit 的模糊 #
- SwiftUI
blur：简单易用，但功能较基础。 - UIVisualEffectView（UIKit）：功能更强大（支持动态模糊、材质效果），可通过
UIViewRepresentable桥接到 SwiftUI。
完整示例 #
struct BlurExample: View {
@State private var blurRadius: CGFloat = 0
var body: some View {
VStack {
// 模糊背景 + 文字
ZStack {
Image("landscape")
.resizable()
.scaledToFill()
.blur(radius: blurRadius)
.edgesIgnoringSafeArea(.all)
Text("Blur Radius: \(Int(blurRadius))")
.font(.title)
.foregroundStyle(.white)
.shadow(color: .black, radius: 5)
}
// 控制条
Slider(value: $blurRadius, in: 0...20)
.padding()
}
}
}
通过 blur 修饰符，你可以快速为视图添加美观的模糊效果，适用于背景虚化、焦点突出、动态视觉反馈等场景。