लेआउट कंटेनर

Jetpack Compose में कई लेआउट कंटेनर उपलब्ध हैं. इनकी मदद से, यूज़र इंटरफ़ेस (यूआई) के कॉम्पोनेंट को व्यवस्थित किया जा सकता है. Row और Column जैसे बुनियादी लेआउट कंपोज़ेबल, आसान अरेंजमेंट को मैनेज करते हैं. हालांकि, कई ऐप्लिकेशन को ज़्यादा रिस्पॉन्सिव और अडैप्टिव कंटेनर की ज़रूरत होती है, क्योंकि स्क्रीन का साइज़ बदलता है और उपयोगकर्ता का डेटा बढ़ता है.

लेआउट कंटेनर में ये शामिल हैं:

  • लेज़ी लिस्ट और लेज़ी ग्रिड: LazyColumn, LazyRow, और LazyVerticalGrid जैसे कॉम्पोनेंट, बड़े या डाइनैमिक साइज़ वाले डेटा सेट को बेहतर तरीके से दिखाते हैं. इसके लिए, वे सिर्फ़ उन आइटम को कंपोज़ और लेआउट करते हैं जो फ़िलहाल व्यूपोर्ट में दिख रहे हैं.
  • पेजर: HorizontalPager और VerticalPager जैसे कंटेनर, जिनकी मदद से उपयोगकर्ता कॉन्टेंट के पेजों के बीच स्वाइप या स्क्रोल कर सकते हैं.
  • फ़्लो लेआउट: रिस्पॉन्सिव वन-डाइमेंशनल कंटेनर (FlowRow और FlowColumn), जो जगह खत्म होने पर, ओवरफ़्लो होने वाले आइटम को अगली लाइन या कॉलम में अपने-आप रैप कर देते हैं.
  • ग्रिड: यह एक फ़्लेक्सिबल, टू-डाइमेंशनल स्ट्रक्चर होता है. इसमें आइटम को कई कॉलम या कई लाइन वाले लेआउट में दिखाया जाता है. ये लेआउट, कंटेनर के साइज़ के हिसाब से अडजस्ट हो जाते हैं.
  • फ़्लेक्सबॉक्स: यह सीएसएस फ़्लेक्सबॉक्स से प्रेरित, अडैप्टिव कंटेनर है. इससे आपको इस बात पर बारीकी से कंट्रोल मिलता है कि आइटम, उपलब्ध जगह को भरने के लिए मुख्य और क्रॉस ऐक्सिस के साथ कैसे रैप, बड़े, छोटे, और अलाइन होते हैं.

सही लेआउट कंटेनर चुनना

Compose में लेआउट बनाते समय, बेसिक और ऐडवांस लेआउट कंटेनर में से किसी एक को चुनना, आपके डिज़ाइन पर निर्भर करता है. साथ ही, इस बात पर भी निर्भर करता है कि जगह कम होने पर आइटम को रैप करना ज़रूरी है या नहीं और आइटम का साइज़ डाइनैमिक तरीके से कैसे बदलता है.

नीचे दी गई टेबल में, Compose 1D के हर लेआउट कंटेनर की सुविधाओं के बारे में खास जानकारी दी गई है:

कंटेनर

आइटम को नई लाइनों में रैप करना

हर आइटम के हिसाब से बढ़ोतरी

हर आइटम के लिए, इन्वेंट्री में कमी

हर आइटम का शुरुआती साइज़

कई लाइनों पर उपलब्ध जगह को भरने के लिए, आइटम का साइज़ बढ़ जाता है

आइटम का क्रम बदलना

लेज़ी लोडिंग

इनके लिए सबसे सही:

पंक्ति / कॉलम

❌

weight के ज़रिए सिर्फ़ एक लाइन में ✅

❌

❌

❌

❌

❌
  • एक जैसी पंक्तियां, जिनमें आइटम की संख्या कम और तय होती है. आइटम, उपलब्ध सीमाओं के अंदर फ़िट हो जाते हैं और उन्हें कई लाइनों में रैप करने की ज़रूरत नहीं होती.

FlowRow / FlowColumn

✅

सीमित

❌

❌

कुछ हद तक

❌

❌
  • इसकी जगह FlexBox लागू हुआ.

LazyRow / LazyColumn

❌

❌

❌

❌

❌

❌

✅
  • आइटम की लंबी या अनंत सूचियां, जहां परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के लिए सिर्फ़ दिखने वाले आइटम को रेंडर करने की ज़रूरत होती है.
  • एक ही दिशा में स्क्रोल होने वाले डाइनैमिक या बड़े डेटासेट.

FlexBox

✅

✅

✅

✅

✅

✅

❌
  • ऐसे लेआउट जिनमें अडैप्टिव सुविधाओं की ज़रूरत होती है. जैसे, शुरुआती साइज़ तय करना, डाइनैमिक आइटम का बढ़ना/छोटा होना (grow/shrink), विज़ुअल का क्रम बदलना (order) या आइटम-लेवल पर क्रॉस-ऐक्सिस अलाइनमेंट (alignSelf).
  • अलग-अलग साइज़ के आइटम व्यवस्थित करना.

यहां दी गई टेबल में, Grid और इसके जैसे अन्य कंपोज़ेबल की सुविधाओं के बारे में खास जानकारी दी गई है:

कंटेनर

सटीक 2D अलाइनमेंट

आइटम स्पैनिंग (कॉलम)

आइटम स्पैनिंग (पंक्तियां)

लेज़ी लोडिंग

इनके लिए सबसे सही:

ग्रिड

✅

✅ (GridArea के ज़रिए)

✅

❌
  • स्ट्रक्चरल टू-डाइमेंशनल लेआउट, जिनमें सभी आइटम स्क्रीन पर होते हैं. साथ ही, उन्हें हॉरिज़ॉन्टल और वर्टिकल अलाइनमेंट की ज़रूरत होती है.
  • अलग-अलग स्क्रीन साइज़ के हिसाब से लेआउट को अडैप्टिव तरीके से फिर से स्ट्रक्चर करना.

LazyVerticalGrid

✅

✅ (span के ज़रिए)

❌

✅
  • वर्टिकल स्क्रोलिंग फ़ीड और बड़े कैटलॉग, जिनमें कॉलम की ज़रूरत होती है.

LazyStaggeredGrid

❌ (सिर्फ़ 1D)

Partial (full span only)

❌

✅
  • अलग-अलग ऊंचाई वाले आइटम के साथ स्क्रोल किए जा रहे फ़ीड.

LazyHorizontalGrid

✅

❌

✅

✅
  • हॉरिज़ॉन्टल स्क्रोलिंग कैरसेल या कई लाइनों वाला पेज पर मौजूद डेटा.

पंक्तियों और कॉलम को मर्ज करना

❌

❌

❌

❌
  • आसान कॉम्पोनेंट असेंबली, जैसे कि किसी आइकॉन के बगल में टेक्स्ट लेबल लगाना.
पीछे जाएं
मॉडिफ़ायर की सूची
आगे बढ़ें
लेज़ी लिस्ट और लेज़ी ग्रिड