> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/view/modifier/examples/nsfw.md).

# .nsfw()

[SwiftUI](/ios/swiftui.md) ⟩ [Views](/ios/swiftui/view.md) ⟩ [View Modifiers](/ios/swiftui/view/modifier/viewmodifier.md) ⟩ [examples](/ios/swiftui/view/modifier/examples.md) ⟩

{% tabs %}
{% tab title="💈範例" %}
{% hint style="info" %}
**NSFW** 代表「**N**ot **S**afe **F**or **W**ork」，「上班不宜」的意思。這個例子可以用「觸控」來控制要不要將圖片模糊化。
{% endhint %}

{% embed url="<https://youtu.be/zlQJdlHEWnQ>" %}

```swift
struct ContentView: View {

    var body: some View {
        HStack {
            tiger
            Color.orange.aspectRatio(1, contentMode: .fit)
        }.frame(height: 300)
    }
    
    var tiger: some View {
        // 也可用 Image(playground: "...")
        Image(uiImage: #imageLiteral(resourceName: "tiger.heic"))
            .resizable()
            .scaledToFit()
            .shadow(radius: 4)
            .nsfw()                // ⭐️ view modifier: 🌀 .nsfw()
            .padding()
            .background(Color.gray)
    }
}
```

{% endtab %}

{% tab title="🌀 .nsfw()" %}

```swift
import SwiftUI

// (internal) view modifier
struct NSFW: ViewModifier {
    
    // ⭐️ 負責要不要套用「模糊」效果
    @State private var blur = true              
    
    // body
    func body(content: Content) -> some View {
        content
            .blur(radius: blur ? 20 : 0)       // ⭐️ 模糊效果
            .clipped()                         // ⭐️ 不讓模糊效果擴散出去
            .overlay(nsfwText)                 // ⭐️ 圖片上文字
            
            // ⭐️ 利用觸控控制「模糊」效果
            .onTapGesture { 
                withAnimation {                // ⭐️ 啟用「動畫」效果
                    self.blur.toggle()         // ⭐️ 切換 `blur`
                }
            }
    }
    
    // overlay text
    var nsfwText: some View {
        VStack {
            Image(systemName: "eye.slash.fill")
            Text("NSFW").font(.caption)
        }
        .foregroundColor(.white)
        .opacity(blur ? 1 : 0)               // ⭐️ 顯示或隱藏文字
    }
}

// view modifier helper
extension View {
    public func nsfw() -> some View { modifier(NSFW()) }
}
```

{% endtab %}

{% tab title="📗 參考" %}

* [x] Sarun ⟩ [SwiftUI's ViewModifier](https://sarunw.com/posts/swiftui-viewmodifier/)&#x20;
  {% endtab %}

{% tab title="📘 手冊" %}

* SwiftUI ⟩ View ⟩ .[**modifier**](https://developer.apple.com/documentation/swiftui/view/modifier\(_:\))(\_:)&#x20;
  {% endtab %}

{% tab title="👥 相關" %}

* [Image(playground:)](/ios/custom/ext/image/image-playground.md) - Image extension
  {% endtab %}
  {% endtabs %}