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