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 还为我们提供了另一种创建模糊效果的方法，即材质类型。材质类型是具有不同半透明效果级别的预定义模糊效果的集合。使用这些，我们可以获得深度感。

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

SwiftUI 支持以下类型的材质类型：

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

语法

以下是语法：

.backgound(.thinMaterial)

示例

以下 SwiftUI 程序用于使用材质类型模糊当前视图。

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()
}

输出