根據條件模糊 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
)
}