.watermark()

SwiftUI ⟩ Views ⟩ View Modifiers ⟩ examples ⟩

💈範例

⬆️ 需要： .nsfw(), Image(playground:)

struct ContentView: View {
    
    // picker selection
    @State private var selection = "bottom right"
    // watermark alignment
    @State private var alignment: Alignment = .bottomTrailing
    
    var body: some View {
        VStack {
            alignmentPicker
            blocks
        }.frame(height: 300)
    }
    
    var blocks: some View { 
        HStack {
            ZStack {
                Color.gray
                Image(playground: "[e-mail]")    // 🌀 Image
            }
            .watermark{ Label("watermark", systemImage: "pin") }
            .nsfw()                                    // 🌀 .nsfw
            Color.gray
                // ⭐️ watermark with alignment
                .watermark(alignment){ Text("📌 hello") }
        }
    }
    
    // ⭐️ alignments for watermarks
    let alignments: [String: Alignment] = [
        "top left"    : .topLeading, 
        "top right"   : .topTrailing, 
        "bottom right": .bottomTrailing,
        "bottom left" : .bottomLeading
    ]
    
    // ⭐️ picker content
    let keys = ["bottom right", "bottom left", "top left", "top right"]
    
    /// segmented control
    var alignmentPicker: some View {
        Picker("Alignment", selection: $selection) {
            ForEach(0..<keys.count){ Text(keys[$0]).tag(keys[$0]) }
        }
        .pickerStyle(.segmented)
        .shadow(radius: 2)
        .padding()
        // ⭐️ animate the change when `selection` changes
        .onChange(of: selection) { newSelection in
            withAnimation {
                self.alignment = alignments[newSelection]!
            }
        }
    }
}

🌀 .watermark()

// 2022.01.19 / watermark() + parameters: fgColor, bgColor

extension View {
    public func watermark<L: View>(
        fgColor: Color = .white,
        bgColor: Color = .black,
        _ align: Alignment = .bottomTrailing,
        @ViewBuilder label : () -> L
    ) -> some View 
    {
        let overlay = label()
            .font(.caption)
            .foregroundColor(fgColor)
            .padding(.horizontal, 8)
            .padding(.vertical, 4)
            .background(bgColor)
            .padding(4)
            .opacity(0.6)
        
        return self.overlay(overlay, alignment: align)
    }
}

👥 相關

• 🅿️ ViewModifier

📗 參考

• Paul ⟩ Custom modifiers

• Sarun ⟩ SwiftUI's ViewModifier

⬇️ 應用

• NColumns - LazyVGrid