Jetpack Compose Academy · पाठ

Stats Row और Follow Button

card में interactive details जोड़िए।

पाठ 3, कुल 4 में से13 चरण

Stats Row और Follow Button, CoddyKit पर Jetpack Compose Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Jetpack Compose Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

इंटरैक्टिव विवरण जोड़ें

शीर्षलेख पूरा हो गया है, अब आप निचला आधा हिस्सा जोड़ेंगे: stats की एक Row और टैप पर प्रतिक्रिया देने वाला फ़ॉलो बटन। यहीं से कार्ड जीवंत होता है। ⚡

एक आँकड़ा खंड

हर आँकड़ा दो Text से बना होता है: बड़ी संख्या और छोटा लेबल। एक छोटा Column उन्हें एक व्यवस्थित खंड के रूप में साथ रखता है।

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("128")
    Text("Posts")
}

संख्या को उभारें

गिनती उभरकर दिखनी चाहिए, जबकि लेबल हल्का रहे। संख्या को गाढ़ा style दें और लेबल के लिए छोटी शैली चुनें।

Text("128", style = MaterialTheme.typography.titleMedium)
Text("Posts", style = MaterialTheme.typography.labelSmall)

आँकड़ों को Row में रखें

तीन आँकड़ा खंड एक-दूसरे के बगल में रहते हैं, इसलिए उन्हें एक Row में लपेटें। हर खंड बाएँ से दाएँ व्यवस्थित किया गया एक बच्चा बन जाता है।

Row {
    StatBlock("128", "Posts")
    StatBlock("4.2k", "Followers")
    StatBlock("180", "Following")
}

आँकड़ों में समान अंतर रखें

Row पर Arrangement.SpaceEvenly का उपयोग करके खंडों को पूरे कार्ड में फैलाएँ, ताकि सभी अंतर बराबर और संतुलित रहें।

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
) { /* ... */ }

फ़ॉलो बटन जोड़ें

आँकड़ों के नीचे एक Button जोड़ें। इसका onClick lambda उपयोगकर्ता के टैप करते ही आपका कोड चलाता है।

Button(onClick = { /* follow */ }) {
    Text("Follow")
}

पूरी चौड़ाई में करें

मुख्य ऐक्शन बटन पूरे कार्ड में फैला हुआ सबसे अच्छा दिखाई देता है। इसे एक किनारे से दूसरे किनारे तक फैलाने के लिए fillMaxWidth जोड़ें।

Button(
    onClick = { /* follow */ },
    modifier = Modifier.fillMaxWidth()
) { Text("Follow") }

फ़ॉलो स्थिति पर नज़र रखें

बटन को Follow और Following के बीच बदलना चाहिए। इसे remember और mutableStateOf के साथ रखें, ताकि UI टैप पर प्रतिक्रिया दे।

var following by remember { mutableStateOf(false) }

टैप पर स्थिति बदलें

onClick के भीतर बूलियन मान बदलें। Compose देख लेता है कि state बदल गई है और नए टेक्स्ट के साथ बटन को अपने-आप फिर से बनाता है।

Button(onClick = { following = !following }) {
    Text(if (following) "Following" else "Follow")
}

इसे कार्ड में जोड़ें

बाहरी Column में शीर्षलेख के नीचे आँकड़ों की Row और Button रखें। अब पूरा कार्ड ऊपर से नीचे तक सही क्रम में दिखाई देता है।

एक इंटरैक्टिव कार्ड

अब आपके पास आँकड़े, फ़ॉलो बटन और लाइव स्थिति है। टैप करने पर स्क्रीन सचमुच बदलती है, जो declarative Compose UI का मूल है। 🎉

त्वरित जाँच

टैप करने पर बटन के टेक्स्ट को अपडेट करने में क्या मदद करता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: आँकड़े और ऐक्शन

आपने समान अंतर वाले आँकड़ा खंडों की एक Row और याद रखी गई स्थिति से संचालित पूरी चौड़ाई का फ़ॉलो बटन बनाया। अब आप इसे साफ़-सुथरे, दोबारा उपयोग किए जा सकने वाले हिस्सों में बदलेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Stats Row और Follow Button” पाठ निःशुल्क है?

हाँ—“Stats Row और Follow Button” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Jetpack Compose Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Stats Row और Follow Button” में मैं क्या सीखूँगा?

card में interactive details जोड़िए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Jetpack Compose Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Jetpack Compose Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Jetpack Compose Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“Stats Row और Follow Button” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Jetpack Compose Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Jetpack Compose Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Jetpack Compose Academy पर वापस जाएँ