根据条件模糊 SwiftUI 中的视图

Question

有没有办法在 SwiftUI 中有条件地模糊视图？

例如对于 VStack：

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

会使视线模糊。 但是，我想根据条件对其进行模糊处理。

我可以使用 if 语句，但这意味着在代码中编写两次视图，如下所示：

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

这是实现预期结果的唯一方法吗？

Answer 1

您可以使用几种不同的方法。 方法 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 2

我们可以只使用0 （没有模糊），比如

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

Answer 3

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

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

然后在你的身体中使用相同的 View 两次，如下所示：

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

如果您的视图需要动态属性，您可以使用返回 AnyView 的函数，如下所示：

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