SwiftUI - 模糊效果

SwiftUI 中的模糊效果在用户界面的指定视图、背景或图像上应用模糊滤镜。它通常用于增强视觉体验、创建深度、聚焦于指定组件或改善应用程序的用户体验。

SwiftUI 支持高斯模糊滤镜，这是一种使用称为高斯函数的数学函数的模糊滤镜。它通过对给定半径内的像素取平均值来平滑图像，从而创建模糊效果。在 SwiftUI 中，我们可以使用以下方式实现模糊效果 −

• blur() 修饰符
• 材质类型

blur() 修饰符

SwiftUI 提供了一个名为 blur() 的内置修饰符来实现模糊效果。此修饰符允许我们立即为任何视图添加自定义高斯模糊效果。它通常用于模糊背景以增强前景组件。

语法

以下是语法 −

func blur(radius: CGFloat, opaque: Bool = false)->some View

参数

此修饰符采用以下参数 −

• radius:它表示模糊的径向大小。
• opaque:如果此参数的值为 true，则允许我们创建不透明模糊。否则，我们只能使用透明度。它是一个可选参数。

示例

以下 SwiftUI 程序用于模糊图像视图。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Text("Original Image:").font(.largeTitle)
         Image("wallpaper").resizable()
            .frame(width: 300, height: 300)
         Text("Blurred Image:").font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .frame(width: 300, height: 300)
            .blur(radius: 4.5)
      }
   }
}

#Preview {
   ContentView()
}

输出

材质类型

除了 blur() 修饰符之外，SwiftUI 还为我们提供了另一种创建模糊效果的方法，即 Material 类型。Material 类型是具有不同级别半透明效果的预定义模糊效果的集合。使用这些，我们可以实现深度感。

它们允许我们在不影响前景元素的情况下模糊背景。它们不是视图，但它们会在视图和其背景之间创建一个半透明层。它们在 Human InterfaceGuidelines 中定义。Material 类型通常与 background() 或 overlay() 修饰符一起使用。

SwiftUI 支持以下类型的 Material 类型 −

• .regularMaterial: 用于应用常规材质效果。
• .thinMaterial: 用于应用较轻的材质效果。
• .ultraThinMaterial: 用于应用最轻的材质效果。
• .thickMaterial: 用于应用较厚的材质效果。
• .ultraThickMaterial: 用于应用最厚的材质效果。
• .bar: 用于为栏和工具栏应用合适的材质效果。

语法

以下是语法 −

.backgound(.thinMaterial)

示例

以下 SwiftUI 程序用于使用 Material Type 模糊当前视图。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Rectangle().fill(.mint)
         VStack{
            Text("Thin Material")
            Rectangle()
               .frame(width: 250, height: 100)
               .background(.thinMaterial)
            Text("Thick Material")
            Rectangle()
               .frame(width: 250, height: 100)
               .background(.thickMaterial)
            
            Text("Ultra Thin Material")
            Rectangle()
               .frame(width: 250, height: 100)
               .background(.ultraThinMaterial)
            
            Text("Thick Material")
            Rectangle()
               .frame(width: 250, height: 100)
               .background(.ultraThickMaterial)
            
            Text("Regular Material")
            Rectangle()
               .frame(width: 250, height: 100)
               .background(.regularMaterial)
         }
      }      
   }
}
#Preview {
   ContentView()
}

输出