SwiftUI Visual Effects
System materials in SwiftUI
View modifiers that wrap UIVisualEffectView
and all of its associated objects, with environment integration for storing effect styles. Vibrancy effects will always use the current blur effect style for proper vibrancy-effect layering.
Adding and Styling a Blur Effect
YourView()
.blurEffect()
.blurEffectStyle(.systemChromeMaterial)
Adding and Styling a Vibrancy Effect
YourView()
.vibrancyEffect()
.vibrancyEffectStyle(.fill)
Adding and Styling Blur and Vibrancy Effects
ZStack {
YourBackgroundContent()
.blurEffect()
YourForegroundContent()
.vibrancyEffect()
}
.blurEffectStyle(.systemChromeMaterial)
.vibrancyEffectStyle(.fill)
Adding Blur and Vibrancy Effects Directly to a View
Adding both a blur and vibrancy effect directly to a view only displays the blur effect.
If you’d like to blur the view’s background content, while adding vibrancy to the view’s foreground content, use the .background()
modifier, and pass BlurEffect()
as its argument. Although BlurEffect
may not be very Apple-like, it’s better than the .blurEffect()
modifier implementation below.
YourView()
.vibrancyEffect()
.background(BlurEffect())
YourView()
.vibrancyEffect()
.background(
Color.clear
.blurEffect()
)