无论是在吸引用户上还是使事物变得更加美观上，为背景、视图或其他因素添加模糊效果在现代UI / UX设计和软件开发中占据很多优势。

作为iOS用户，你可能已经非常了解此类效果，因为它们已经在操作系统内部得到广泛使用。一个典型的例子是在iPhone上打开Spotlight搜索：

通过使用模糊处理，可以使用户不被主屏幕的图标和字体分散注意力，并且可以使其专注于搜索及搜索的结果。另一个优点是可读性：如果没有模糊效果，则主页图标的字体与搜索结果中重叠的文本会让阅读变得困难。

从iOS 13开始，Apple的SwiftUI框架为我们提供了一个不错的view modifier：blur修饰符。

本系列文章的目的旨在说明如何在自己的app中运用此修饰符。在第一部分中，重点是背景图像上的简单模糊，而在第二部分中，是要模糊较复杂的视图。

**注意：需要 XCode 11.x或更高版本，Swift 5.x和iOS 13.x或更高版本。本文已假设你已经了解Swift和SwiftUI中的编程，知道如何构建app以及如何在其中实现自己的视图，所以这不是教基本知识的教程。

目标

在开始编码之前，我们需要明确 我们 想要实现的目标。第一个目标是 要 一个带有背景图像的简单视图，我们想在按下按钮时使其模糊：

一个简单的背景模糊

只需按一下按钮，我们就可以在保持其他内容清晰的情况下使背景变得模糊。看起来很简单吧！

View Modifier

首先要做的是为模糊效果创建view modifier。该修改器获取视图内容，把它包装在一个组中，然后将这个组应用系统中的blur修改器。

import SwiftUI
struct BlurModifierSimple: ViewModifier {
@Binding var showOverlay: Bool
@State var blurRadius: CGFloat = 10
func body(content: Content) -> some View {
Group {
content
.blur(radius: showOverlay ? blurRadius : 0)
.animation(.easeInOut)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}

该代码应该非常简单明了，并且不需要任何解释。

你可能会想，为什么根本不需要此修饰符，因为模糊本身就可以直接应用于视图。这个想法的问题在于SwiftUI是有条件的不允许内置view modifiers。对于条件绑定，必须创建一个单独的view modifier -并且我们希望模糊效果是有条件的，因为它是从外部触发的（在我们的示例中，通过点击按钮）。

主视图

在主视图内部，我们现在需要将此修饰符添加到要模糊的视图中。这是上面的预览中的视图代码：

import SwiftUI
struct ContentView: View {
@State var isBlur: Bool = false
var body: some View {
VStack(spacing: 20) {
Text(“Some Text Content”)
.padding()
.font(.largeTitle)
.background(Color.white.opacity(0.8))
.foregroundColor(Color.black)
.cornerRadius(10)
Button(
action: { self.isBlur.toggle() },
label: {
Text(“Toggle Blur”)
.padding()
.background(Color.blue)
.foregroundColor(Color.white)
.cornerRadius(10)
}
)
.buttonStyle(PlainButtonStyle())
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(
Image(“Background”)
.modifier(BlurModifierSimple(showOverlay: $isBlur))
)
}
}

主要包装器是内部带有 Text 和 Button 的简单VStack 。在视图的顶部，我们还要求一个状态变量来保持状态，即是否显示模糊。

有趣的部分是我们设置为背景的图像视图（第28-31行）。在这个图像上，我们应用我们先前创建的模糊修改器，因为我们不希望主视图（VStack）变得模糊，只希望背景本身模糊！

在我们的示例中，我们使用简单的图像视图进行模糊处理，但这当然可以是任何类型的视图，例如，你可以有一些复杂的自定义视图用来作背景。

如果你想全面了解阴影和模糊效果，这里有一篇非常不错的文章，内容涉及：“如何在现代UI设计中使用阴影和模糊效果。”

作者 Martin Albrecht

Better Programming

原文链接 https://sanzaru84.medium.com/