23:21
Alert Dialogue Box || Humble Coders
Humble Coders
Overview
यह वीडियो Jetpack Compose में अलर्ट डायलॉग्स और लैम्ब्डा फंक्शंस का उपयोग करके एक साधारण ऐप बनाने के बारे में है। यह सिखाता है कि बटन क्लिक पर डायलॉग कैसे प्रदर्शित करें, उपयोगकर्ता से इनपुट कैसे लें, और उस इनपुट को मुख्य स्क्रीन पर कैसे अपडेट करें। वीडियो में म्यूटेबल स्टेट्स, टेक्स्ट फील्ड्स और अलर्ट डायलॉग कंपोनेंट्स के निर्माण पर भी प्रकाश डाला गया है।
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- ऐप की अगली स्क्रीन बनाने से पहले, हमें अलर्ट डायलॉग्स और लैम्ब्डा फंक्शंस जैसे नए कॉन्सेप्ट सीखने होंगे।
- इन कॉन्सेप्ट्स को समझने के लिए एक छोटी मिनी ऐप बनाई जाएगी, जो दो वीडियो में पूरी हो जाएगी।
- अलर्ट डायलॉग्स यूजर से इनपुट लेने या कन्फर्मेशन मांगने के लिए इस्तेमाल होते हैं, जैसे 'क्या आप डिलीट करना चाहते हैं?'।
अलर्ट डायलॉग्स यूजर इंटरैक्शन के लिए महत्वपूर्ण हैं और ऐप की उपयोगिता बढ़ाते हैं। लैम्ब्डा फंक्शंस कोड को अधिक कुशल और पठनीय बनाते हैं।
एक साधारण बटन वाली ऐप जहाँ बटन क्लिक करने पर 'एंटर फर्स्ट नेम' और 'एंटर लास्ट नेम' के साथ एक डायलॉग बॉक्स खुलता है।
- यूआई में जो भी चीज़ें बदलती हैं (जैसे टेक्स्ट या काउंटर), वे म्यूटेबल स्टेट्स होती हैं।
- यूजर से इनपुट लेने के लिए, हमें म्यूटेबल वेरिएबल्स (स्टेट्स) बनाने की आवश्यकता होती है।
- जब म्यूटेबल स्टेट की वैल्यू बदलती है, तो Jetpack Compose स्वचालित रूप से यूआई को अपडेट कर देता है।
म्यूटेबल स्टेट्स को समझना यह जानने के लिए आवश्यक है कि ऐप डेटा को कैसे मैनेज करता है और यूजर के एक्शन्स पर कैसे प्रतिक्रिया करता है।
फर्स्ट नेम और लास्ट नेम को स्टोर करने के लिए `mutableStateOf<String>()` का उपयोग करके म्यूटेबल स्टेट वेरिएबल्स बनाना।
- एक कार्ड कंपोनेंट बनाया गया है जो फर्स्ट नेम और लास्ट नेम की वैल्यू खाली न होने पर ही दिखाई देता है।
- कार्ड के अंदर, हेलो के साथ फर्स्ट नेम और लास्ट नेम प्रदर्शित करने वाला एक टेक्स्ट कंपोनेंट है।
- एक 'ऐड डिटेल्स' बटन बनाया गया है, जिस पर क्लिक करने से अलर्ट डायलॉग खुलना चाहिए।
यह सेक्शन दिखाता है कि कैसे कंपोनेंट्स को व्यवस्थित किया जाए और यूजर एक्शन के आधार पर विजिबिलिटी को कैसे कंट्रोल किया जाए।
एक `Card` कंपोनेंट जिसमें `Text("हेलो $firstName $lastName")` है, जो केवल तभी दिखाई देता है जब `firstName` खाली न हो।
- अलर्ट डायलॉग दिखाने के लिए एक अलग कंपोजेबल फंक्शन (`addDetailsDialog`) बनाया जाता है।
- Jetpack Compose में अलर्ट डायलॉग के लिए `AlertDialog` कंपोनेंट का उपयोग किया जाता है।
- अलर्ट डायलॉग में टाइटल, टेक्स्ट कंटेंट, ऑनडिसमिस रिक्वेस्ट (कैंसिल) और कन्फर्म बटन जैसे पैरामीटर्स होते हैं।
यह सिखाता है कि कैसे एक रियूजेबल डायलॉग कंपोनेंट बनाया जाए जो ऐप के विभिन्न हिस्सों में इस्तेमाल किया जा सके।
`AlertDialog(title = { Text("Add Details") }, ...)` का उपयोग करके एक बेसिक अलर्ट डायलॉग बनाना।
- अलर्ट डायलॉग के अंदर टेक्स्ट इनपुट लेने के लिए `TextField` कंपोनेंट का उपयोग किया जाता है।
- टेक्स्ट फील्ड में यूजर जो टाइप करता है, वह `value` पैरामीटर में दिखाया जाता है और `onValueChange` से अपडेट होता है।
- यूजर के टाइप करते ही रियल-टाइम में यूआई अपडेट करने के लिए म्यूटेबल स्टेट्स का उपयोग किया जाता है।
यह सेक्शन यूजर से डेटा इनपुट लेने की प्रक्रिया को समझाता है, जो किसी भी इंटरैक्टिव ऐप के लिए मौलिक है।
एक `TextField` बनाना जिसमें `label = { Text("Enter First Name") }` हो और `value` को `firstNameState.value` से और `onValueChange` को `firstNameState.value = it` से लिंक करना।
- सेव बटन पर क्लिक करने पर, डायलॉग में दर्ज फर्स्ट नेम और लास्ट नेम को मुख्य स्क्रीन की स्टेट्स में अपडेट होना चाहिए।
- एक फंक्शन के अंदर से दूसरे फंक्शन की स्टेट या वेरिएबल को सीधे बदलना संभव नहीं है।
- इस समस्या को हल करने के लिए लैम्ब्डा फंक्शंस की आवश्यकता होती है, जो कॉलर को डेटा पास करने की अनुमति देते हैं।
यह बताता है कि क्यों फंक्शन्स के बीच कम्युनिकेशन के लिए विशेष मैकेनिज्म (जैसे लैम्ब्डा) की जरूरत होती है, खासकर जब स्टेट मैनेजमेंट शामिल हो।
सेव बटन के `onClick` में `firstNameOnScreen = firstNameInDialog` जैसे असाइनमेंट करने का प्रयास करना, जो 'unresolved reference' एरर देता है।
Key takeaways
- Jetpack Compose में अलर्ट डायलॉग्स यूजर से इनपुट लेने या कन्फर्मेशन मांगने का एक प्रभावी तरीका हैं।
- यूआई एलिमेंट्स को डायनामिक रूप से अपडेट करने के लिए म्यूटेबल स्टेट्स का उपयोग करना महत्वपूर्ण है।
- टेक्स्ट फील्ड्स यूजर इनपुट को कैप्चर करने के लिए `value` और `onValueChange` पैरामीटर्स का उपयोग करती हैं।
- रियल-टाइम यूआई अपडेट्स म्यूटेबल स्टेट्स और Jetpack Compose के रीकंपोजिशन मैकेनिज्म के कारण संभव होते हैं।
- एक कंपोजेबल फंक्शन से दूसरे कंपोजेबल फंक्शन की स्टेट को सीधे मॉडिफाई नहीं किया जा सकता है; इसके लिए कॉलबैक या लैम्ब्डा फंक्शंस की आवश्यकता होती है।
- अलर्ट डायलॉग्स में टाइटल, कंटेंट, कैंसिल एक्शन (`onDismissRequest`), और कन्फर्म एक्शन (`confirmButton`) जैसे मुख्य भाग होते हैं।
Key terms
Alert DialogLambda FunctionsJetpack ComposeComposable FunctionMutableStateTextFieldonValueChangeState ManagementUI UpdateonDismissRequest
Test your understanding
- अलर्ट डायलॉग का उपयोग ऐप में कब और क्यों किया जाना चाहिए?
- म्यूटेबल स्टेट्स यूआई को रियल-टाइम में अपडेट करने में कैसे मदद करती हैं?
- टेक्स्ट फील्ड में यूजर द्वारा टाइप किए गए इनपुट को कैसे कैप्चर और स्टोर किया जाता है?
- एक कंपोजेबल फंक्शन से दूसरे में डेटा पास करने के लिए लैम्ब्डा फंक्शंस की क्या भूमिका है?
- अलर्ट डायलॉग के `onDismissRequest` पैरामीटर का क्या उद्देश्य है?