SwiftUI: ViewModifiers क्या हैं?

SwiftUI तेजी से iOS ऐप बनाने के लिए लोकप्रिय विकल्प बनता जा रहा है, और आपके द्वारा उपयोग की जाने वाली सबसे आम चीजों में से एक ViewModifiers है। यदि आपने इसे पढ़ने से पहले SwiftUI के साथ काम किया है और यह नहीं जानते हैं कि ViewModifiers क्या हैं, तो मैं गारंटी देता हूं कि आपने इसे महसूस किए बिना पहले उनका उपयोग किया होगा।

ViewModifiers वे विधियाँ हैं जिन्हें आप अपने ऐप में उपयोग किए जाने वाले दृश्यों पर उनके रूप और व्यवहार को अनुकूलित करने के लिए कॉल करते हैं। आप उनका उपयोग रंग और आकार बदलने के लिए, इशारों को जोड़ने के लिए, अपने व्यूज में एक्सेसिबिलिटी विकल्प आदि जोड़ने के लिए करते हैं, अगर आपने कभी इस्तेमाल किया है .backgroundया .foregroundColorअपने प्रोजेक्ट में किया है, तो ये ViewModifiers के उदाहरण हैं।

आप ViewModifiers का उपयोग कैसे करते हैं?

आइए एक प्रोजेक्ट बनाकर शुरू करें, मैं आपको पूरी प्रक्रिया से बोर नहीं करूंगा, इसलिए अपना प्रोजेक्ट बनाते समय स्टोरीबोर्ड के बजाय स्विफ्टयूआई का चयन करना सुनिश्चित करें।

आपके लिए बनाया गया डिफ़ॉल्ट दृश्य पहले से ही कुछ संशोधक का उपयोग करता है, तो चलिए उस पर एक नज़र डालते हैं

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

• .padding: आपको अपने व्यू के लिए पैडिंग निर्दिष्ट करने देता है, ध्यान दें कि क्योंकि हम कोई मान प्रदान नहीं करते हैं, यह सभी पक्षों के लिए सिस्टम डिफ़ॉल्ट पैडिंग लागू करता है। .padding(.top, 12)आप इस तरह या .padding(.horizontal, 12)उदाहरण के लिए किनारों और मूल्यों को निर्दिष्ट कर सकते हैं
• .foregroundColor: पाठ रंग, टिंट आदि को प्रभावित करते हुए दृश्य के लिए अग्रभूमि रंग सेट करेगा

• .frame: किसी व्यू का आकार बदलने के लिए उपयोग किया जाता है
• .font: के लिए फ़ॉन्ट परिवार, आकार आदि बदलने के लिए प्रयुक्त होता हैText

शुरू करने से पहले आइए उन बाधाओं की समीक्षा करें जिन्हें हम बटन पर उपयोग करना चाहते हैं - पैडिंग, कॉर्नर त्रिज्या, पृष्ठभूमि रंग।

आइए कुछ पाठ के साथ एक साधारण बटन जोड़कर प्रारंभ करें:

Button(action: {
    // On click
}) {
    Text("Label")
}

हमारे संशोधक जोड़ने के बाद:

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

      
                

                    
                    
                
            

ऊपर दिया गया उदाहरण बहुत सरल है, लेकिन यदि आपकी परियोजना में समान शैलियों (सामान्य पैडिंग मान, थीम वाले पृष्ठभूमि रंग आदि) के साथ कई दृश्य हैं, तो समान संशोधक को दोहराना बहुत जल्दी कष्टप्रद हो सकता है। सौभाग्य से SwiftUI आपको अपने स्वयं के कस्टम संशोधक बनाने देता है।

आइए ऊपर दिए गए उदाहरण पर विचार करें, यदि आप देखते हैं कि बटन टेक्स्ट उस चीज़ से बिल्कुल मेल नहीं खाता है जिसे हम बनाने की कोशिश कर रहे थे। आइए बटन टेक्स्ट के लिए एक कस्टम संशोधक बनाएं:

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

      
                

                    
                    
                
            

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()