在SwiftUI中根据条件模糊视图

Question

是否有一种方法可以在SwiftUI中有条件地模糊视图?

例如VStack:

VStack {
//contents
}.blur(radius: 20)

会模糊视图。但是，我想基于一个条件模糊它。

我可以使用if语句，但这意味着要像这样在代码中编写两次视图:

if(shouldBlur)
{
VStack {
//contents
}.blur(radius: 20)
}
else 
{
VStack {
//contents
}
}

这是实现预期结果的唯一途径吗?

Answer 1

我们可以使用0(无模糊)，如

VStack {
//contents
}.blur(radius: shouldBlur ? 20 : 0)     // << here !!

Answer 2

您可以使用几种不同的方法。方法2和方法3涉及到一些重复，但是你可以从你的直接视图层次中抽象出来。

struct ContentView: View {
@State private var isBlurred = false

var body: some View {
VStack {
Button("Toggle") { isBlurred.toggle() }

Text("Sample 1").blur(radius: isBlurred ? 20 : 0)
Text("Sample 2").modifier(ConditionalBlurred(isBlurred: isBlurred, radius: 20))
Text("Sample 3").conditionalBlur(isBlurred: isBlurred, radius: 20)
}
}
}
struct ConditionalBlurred: ViewModifier {
var isBlurred: Bool
var radius: CGFloat

func body(content: Content) -> some View {
if isBlurred {
content.blur(radius: radius)
} else {
content
}
}
}
extension View {
@ViewBuilder func conditionalBlur(isBlurred: Bool, radius: CGFloat) -> some View {
if isBlurred {
self.blur(radius: radius)
} else {
self
}
}
}

Answer 3

您可以将视图存储在变量中，如下所示:

var viewToBlur: some View = {
//your View
}

然后在body中使用同一个View两次，如下所示:

if(shouldBlur)
{
VStack {
viewToBlur
}.blur(radius: 20)
}
else 
{
VStack {
viewToBlur
}
}

如果你的视图需要动态属性，你可以使用返回AnyView的函数，像这样:

func viewToBlur() -> AnyView{
return AnyView(
//your View
)
}