.nsfw()

SwiftUI ⟩ Views ⟩ View Modifiers ⟩ examples ⟩

NSFW 代表「Not Safe For Work」，「上班不宜」的意思。這個例子可以用「觸控」來控制要不要將圖片模糊化。

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)
    }
}

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()) }
}

Previousexamples Next.roundedBorder()

Last updated 3 years ago

Was this helpful?