Jetpack Compose Academy · पाठ

Profile Card Layout का खाका बनाना

code लिखने से पहले structure की योजना बनाइए।

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

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

पहले रेखाचित्र क्यों बनाएँ

एक भी line लिखने से पहले स्क्रीन की कल्पना करें। एक त्वरित sketch अस्पष्ट विचार को ऐसी स्पष्ट योजना में बदल देता है, जिसे आप आत्मविश्वास से बना सकते हैं। 📝

प्रोफ़ाइल कार्ड में क्या होता है

आपका प्रोफ़ाइल कार्ड कुछ मुख्य चीज़ें दिखाता है: अवतार, नाम, छोटा परिचय, कुछ आँकड़े और फ़ॉलो बटन। यह सूची आपका content inventory है।

बॉक्स में सोचें

Compose चीज़ों को एक-दूसरे के भीतर मौजूद बॉक्स के रूप में व्यवस्थित करता है। हर सामग्री अपने क्षेत्र में रहती है और क्षेत्र बड़े क्षेत्रों के भीतर रखे जाते हैं। शुरुआत इन boxes को बनाकर करें।

ऊपर से नीचे का प्रवाह

अधिकांश कार्ड लंबवत पढ़े जाते हैं: सबसे ऊपर अवतार, उसके नीचे नाम और फिर परिचय। Column बच्चों को ऊपर से नीचे तक रखता है, इसलिए यह आपका बाहरी कंटेनर होगा।

बाहरी Column का रेखाचित्र बनाएँ

पूरा कार्ड एक Column के भीतर रहता है। आप जो भी जोड़ते हैं, वह आपके लिखे क्रम में इसका बच्चा बन जाता है।

Column {
    // avatar
    // name
    // bio
    // stats row
    // follow button
}

आमने-सामने आँकड़े

आँकड़ों की पंक्ति में गिनतियाँ एक-दूसरे के बगल में दिखती हैं, ऊपर-नीचे नहीं। क्षैतिज रूप से रखी जाने वाली हर चीज़ आपके Column के भीतर मौजूद Row में होनी चाहिए।

आँकड़ों की Row की योजना बनाएँ

एक Row का रेखाचित्र बनाएँ जिसमें तीन छोटे खंड हों: पोस्ट, फ़ॉलोअर और following। हर खंड कार्ड का अपना छोटा हिस्सा है।

Row {
    // posts
    // followers
    // following
}

बटन कहाँ रहेगा

फ़ॉलो बटन सबसे आख़िरी आइटम होगा और नीचे पूरी चौड़ाई में रहेगा। आपके रेखाचित्र में यह बाहरी Column का अंतिम बच्चा होगा।

खंडों के नाम रखें

हर क्षेत्र को एक नाम दें: शीर्षलेख, परिचय, आँकड़े और ऐक्शन। अभी खंडों के नाम रखने से बाद में रेखाचित्र को Composables में बदलना लगभग अपने-आप हो जाएगा। ✨

जगह और खाली स्थान

एक अच्छा रेखाचित्र खाली जगहों को भी दिखाता है। कार्ड के चारों ओर padding और खंडों के बीच की जगह कहाँ होनी चाहिए, यह भी नोट करें, ताकि वह कभी भरा-भरा न लगे।

रेखाचित्र से ट्री तक

आपका रेखाचित्र सीधे Composable tree में बदलता है: बाहरी Column, फिर क्रम से उसके बच्चे के रूप में शीर्षलेख, परिचय, आँकड़ों की Row और बटन।

त्वरित जाँच

जो आइटम एक-दूसरे के बगल में होने चाहिए, उनके लिए कौन-सा कंटेनर सबसे उपयुक्त है?

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

पुनरावलोकन: आपकी योजना तैयार है

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

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

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

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

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

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

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

क्या “Profile Card Layout का खाका बनाना” पाठ निःशुल्क है?

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

“Profile Card Layout का खाका बनाना” में मैं क्या सीखूँगा?

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

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

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

“Profile Card Layout का खाका बनाना” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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