.blur()调整器用法

在 SwiftUI 中，.blur() 是一个修饰符（Modifier），用于对视图应用高斯模糊效果，使其产生视觉上的柔化或虚化。它常用于创建磨砂玻璃效果（如 iOS 控制中心背景）、聚焦高亮或艺术化处理。以下是它的详细解析和实际应用指南：

1. 基本语法

基础模糊

swift 复制代码

.blur(radius: CGFloat) // radius: 模糊半径（值越大越模糊）

参数：
- radius：模糊强度，单位为 pt。
  - 0：无模糊（默认）。
  - 5：轻度模糊（适合背景虚化）。
  - 20：重度模糊（内容不可辨）。

可选项：模糊形状控制

swift 复制代码

.blur(radius: CGFloat, opaque: Bool) // opaque: 是否允许不透明渲染（性能优化）

opaque ：
- 设为 true 可提升渲染性能（但要求模糊层下的内容不透明）。
- 默认为 false（支持透明背景）。

2. 核心功能

（1）基础模糊效果

swift 复制代码

Image("Mountain")
    .resizable()
    .blur(radius: 8) // 中度模糊

效果：

图片呈现高斯模糊效果，类似毛玻璃。

（2）局部模糊（配合遮罩）

swift 复制代码

ZStack {
    Image("Document") // 底层清晰内容
    Text("机密")
        .font(.largeTitle)
        .padding()
        .background(.ultraThinMaterial) // iOS 风格磨砂背景
        .blur(radius: 2) // 增强模糊
}

（3）动态交互模糊

swift 复制代码

@State private var isBlurred = false

Button("切换模糊") {
    withAnimation {
        isBlurred.toggle()
    }
}
.blur(radius: isBlurred ? 10 : 0) // 点击时模糊

3. 实际应用场景

场景 1：磨砂玻璃背景（iOS 风格）

swift 复制代码

ZStack {
    Image("Wallpaper") // 背景图
        .resizable()
        .scaledToFill()
        .blur(radius: 20) // 重度模糊
    
    VStack {
        Text("控制中心")
            .font(.title)
        Slider(value: $volume)
    }
    .padding()
    .background(.ultraThinMaterial) // 半透明磨砂层
}

场景 2：聚焦高亮（模糊非焦点内容）

swift 复制代码

ZStack {
    VStack {
        Text("次要内容").blur(radius: isFocused ? 5 : 0)
        Text("主要内容").bold()
        Text("其他说明").blur(radius: isFocused ? 5 : 0)
    }
    
    if isFocused {
        RoundedRectangle(cornerRadius: 10)
            .stroke(Color.blue, lineWidth: 2)
    }
}

场景 3：艺术化图片处理

swift 复制代码

Image("Portrait")
    .resizable()
    .blur(radius: 2) // 轻微柔化
    .contrast(1.2)   // 增强对比度
    .saturation(0.8) // 降低饱和度

4. 与其他修饰符的关系

修饰符	作用	与 `.blur()` 的区别
`.opacity()`	调整透明度	模糊保留内容形状但视觉柔化
`.brightness()`	调整亮度	模糊不改变颜色，仅柔化边缘
`.contrast()`	调整对比度	模糊通常需要配合对比度修正

5. 注意事项

性能影响
- 高模糊半径（如 radius > 10）对性能消耗较大，尤其在动态变化时。
- 对复杂视图模糊时，建议用 .drawingGroup() 提升渲染效率。
模糊与透明度的结合
- 模糊效果在透明背景下更明显（如配合 .opacity(0.8)）。
平台差异
- macOS 的模糊效果可能与 iOS 略有不同（需实际测试）。

6. 完整代码示例

动态模糊 + 动画

swift 复制代码

struct BlurExample: View {
    @State private var blurRadius: CGFloat = 0
    
    var body: some View {
        VStack {
            Image("Landscape")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .blur(radius: blurRadius) // 动态模糊
                .animation(.easeInOut, value: blurRadius)
            
            Slider(value: $blurRadius, in: 0...20)
                .padding()
        }
    }
}

总结

功能	代码示例
基础模糊	`.blur(radius: 5)`
磨砂玻璃	`.blur(radius: 20).background(.ultraThinMaterial)`
动态模糊	`.blur(radius: isActive ? 10 : 0).animation(...)`

核心用途 ：

✅ 创建 iOS 风格磨砂背景

✅ 实现焦点引导（模糊次要内容）

✅ 图片艺术化处理

通过合理使用 .blur()，可以显著提升界面的视觉层次和沉浸感！ 🎆