Jetpack Compose Academy · पाठ

LazyVerticalGrid Galleries

items को scrollable grid में व्यवस्थित कीजिए।

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

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

Compose में ग्रिड

जब फ़ोटो से भरी स्क्रीन में व्यवस्थित पंक्तियाँ और कॉलम चाहिए हों, तो LazyVerticalGrid चुनें। यह लंबवत स्क्रॉल होती है और केवल दिखाई देने वाले सेल को कंपोज़ करती है। 🖼️

Lazy क्यों?

LazyColumn की तरह lazy ग्रिड स्क्रीन से बाहर के आइटम छोड़ देती है। हज़ार छवियों वाली गैलरी भी सहज रहती है, क्योंकि Compose सभी सेल एक साथ नहीं, बल्कि आवश्यकता पर बनाता है।

मूल सेटअप

आप LazyVerticalGrid को कॉलम की संख्या देते हैं और उसमें आइटम भरते हैं। हर आइटम एक सेल बनता है, और Compose उन्हें बाएँ से दाएँ, फिर नीचे की ओर रखता है।

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(photos) { photo ->
        PhotoCell(photo)
    }
}

GridCells.Fixed

जब आपको कॉलम की निश्चित संख्या चाहिए, तब GridCells.Fixed(n) का उपयोग करें, जैसे हमेशा तीन आइकन वाली व्यवस्थित ग्रिड।

columns = GridCells.Fixed(3)

सेलों के बीच अंतर

Arrangement पैरामीटर से पर्याप्त खाली स्थान जोड़ें। ये पंक्तियों के बीच और कॉलम के बीच के अंतर को अलग-अलग नियंत्रित करते हैं।

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) { }

ग्रिड के चारों ओर पैडिंग

पूरी ग्रिड को स्क्रीन के किनारों से थोड़ा अंदर रखने के लिए contentPadding का उपयोग करें। इससे पहला और अंतिम सेल किनारों से चिपकते नहीं हैं।

contentPadding = PaddingValues(16.dp)

सूची से आइटम

items बिल्डर आपकी डेटा सूची और एक सेल लैम्ब्डा लेता है। सूची का हर एलिमेंट ठीक एक कंपोज़ किए गए सेल में बदलता है।

items(galleryPhotos) { photo ->
    AsyncImage(model = photo.url, contentDescription = null)
}

एक विशेष सेल

क्या आपको हेडर या कभी-कभार आने वाला एक सेल चाहिए? ऐसी सामग्री के लिए आइटम का उपयोग करें जिसे सूची के साथ दोहराया नहीं जाना चाहिए।

item { GalleryTitle() }
items(photos) { PhotoCell(it) }

कॉलम के पार फैलाना

कोई सेल span की सहायता से पूरी पंक्ति में फैल सकता है। फ़ोटो के ऊपर सेक्शन शीर्षक रखने के लिए यह बहुत उपयोगी है।

item(span = { GridItemSpan(maxLineSpan) }) {
    SectionHeader("Recent")
}

सेलों को वर्गाकार रखें

फ़ोटो गैलरी तब सबसे अच्छी दिखती हैं जब सेल वर्गाकार हों। हर सेल पर aspectRatio(1f) लागू करें, ताकि ऊँचाई उसकी चौड़ाई के अनुसार रहे।

Box(Modifier.aspectRatio(1f)) { PhotoCell(photo) }

ग्रिड बनाम सूची

जब आइटम दृश्यात्मक और समान महत्व वाले हों, जैसे थंबनेल, तब ग्रिड चुनें। जब हर पंक्ति अलग और पूरी चौड़ाई वाला रिकॉर्ड हो, तब सूची चुनें।

त्वरित जाँच

कॉलम की संख्या पर एक छोटी जाँच।

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

पुनरावृत्ति: ग्रिड गैलरी

आपने LazyVerticalGrid सीखी: lazy सेल, कॉलम की संख्या, अंतर, पैडिंग और span। स्क्रॉल होने वाली फ़ोटो गैलरी के लिए यही आपका मुख्य विकल्प है। ✨

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

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

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

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

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

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

क्या “LazyVerticalGrid Galleries” पाठ निःशुल्क है?

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

“LazyVerticalGrid Galleries” में मैं क्या सीखूँगा?

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

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

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

“LazyVerticalGrid Galleries” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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