SwiftUI में ButtonStyle

Feb 08 2023

SwiftUI स्टाइलिंग प्रोटोकॉल का उपयोग करके व्यू बनाने और कस्टमाइज़ करने का एक शक्तिशाली तरीका प्रदान करता है। ये प्रोटोकॉल हमें कोड की एक पंक्ति में हमारे विचारों के स्वरूप और अनुभव को परिभाषित करने की अनुमति देते हैं।

छवि लेख का विषय और लेखक का नाम दिखाती है। लेखक का नाम चेशेरबाक सर्गेई है

नतीजतन, दृश्य नेत्रहीन रूप से सुसंगत हैं, जिससे ऐप का उपयोग करना आसान और अधिक आकर्षक हो जाता है।

बटन स्टाइल के बिना स्टाइलिंग बटन

हम अपने बटन को अलग-अलग संशोधक लागू करके इनलाइन स्टाइल कर सकते हैं। इस उदाहरण पर विचार करें:

Button("Tap me") {}
    .font(.system(.callout, weight: .bold))
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, maxHeight: 48)
    .background(.blue)
    .cornerRadius(8)

सामान्य अवस्था में बटन

यदि आप एक बटन डिज़ाइन करते हैं तो यह दृष्टिकोण पूरी तरह ठीक है। लेकिन अगर आपको एक ही शैली के साथ कई बटन विकसित करने की आवश्यकता है, तो आपको ButtonStyleप्रोटोकॉल का उपयोग करने की आवश्यकता है। यह ऐप में अलग-अलग बटनों पर समान शैली साझा करने और लागू करने में मदद करेगा।

बटन स्टाइल के साथ स्टाइलिंग बटन

चलिए नाम से अपना कस्टम बटन स्टाइल बनाते हैं PrimaryButtonStyle। यह वह शैली है जिसका उपयोग पूरे एप्लिकेशन में प्राथमिक बटनों के लिए किया जाता है।

आइए इस उदाहरण पर एक नजर डालते हैं:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(.blue)
            .cornerRadius(8)
    }
}

बनाई गई बटन शैली को लागू करने के लिए इसे लिखने का प्रयास करें:

Button("Tap me") {}
    .buttonStyle(PrimaryButtonStyle())

बटन स्टाइल कॉन्फ़िगरेशन

बटन के कॉन्फ़िगरेशन ऑब्जेक्ट में बूलियन मान सहित कई गुण हैं, isPressedजो इंगित करता है कि बटन वर्तमान में दबाया जा रहा है या नहीं। जब कोई उपयोगकर्ता किसी बटन को टैप करता है तो हम अपनी बटन शैली को बदलने के लिए उसका उपयोग कर सकते हैं। ऐसा करने के लिए, हम ऐसा कुछ लिख सकते हैं:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(configuration.isPressed ? .blue.opacity(0.75) : .blue)
            .cornerRadius(8)
    }
}

सामान्य और हाइलाइट की गई अवस्थाओं में बटन

प्रो टिप

निम्नलिखित एक्सटेंशन को जोड़कर हमारे कोड को साफ और अधिक पठनीय बनाया जा सकता है PrimaryButtonStyle:

extension ButtonStyle where Self == PrimaryButtonStyle {
    
    static var primary: PrimaryButtonStyle {
        PrimaryButtonStyle()
    }
}

Button("Tap me") {}
    .buttonStyle(.primary)

के साथ ButtonStyle, हम एक बटन की उपस्थिति, लेआउट और इंटरैक्शन को परिभाषित कर सकते हैं और पूरे एप्लिकेशन में स्थिरता सुनिश्चित कर सकते हैं।

इसके अलावा, यह बटन से संबंधित तर्क और स्टाइल को पुन: प्रयोज्य घटकों में समाहित करने का एक तरीका प्रदान करता है। यह कोडबेस को अधिक रखरखाव योग्य और स्केलेबल बनाता है।

पढ़ने के लिए धन्यवाद!

यदि आपको यह लेख मददगार लगता है, तो इसे ताली बजाना सुनिश्चित करें ताकि अन्य लोग इसे और आसानी से खोज सकें।