ग्रिड में लेज़ी लिस्ट

Grid कंपोज़ेबल, स्ट्रक्चरल और टू-डाइमेंशनल स्क्रीन लेआउट बनाता है. Grid, साफ़ तौर पर तय किए गए ट्रैक (लाइन और कॉलम) और गैप का इस्तेमाल करके, रिस्पॉन्सिव लेआउट स्ट्रक्चर तय करता है. यह आपके यूज़र इंटरफ़ेस (यूआई) के बुनियादी आर्किटेक्चर के तौर पर काम करता है.

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

स्ट्रक्चर्ड स्क्रीन लेआउट में डेटा के बड़े कलेक्शन दिखाने के लिए, Grid सेल में LazyColumn या LazyRow जैसे लेज़ी कॉम्पोनेंट एम्बेड करें. हालांकि, ध्यान दें: फ़्लेक्सिबल ट्रैक (1.fr जैसी खास जानकारी के साथ) चाइल्ड एलिमेंट के इंट्रिन्सिक साइज़ के बारे में क्वेरी करते हैं. SubcomposeLayout में इंट्रिन्सिक मेज़रमेंट पास की सुविधा काम नहीं करती. इसलिए, फ़्लेक्सिबल ट्रैक में लेज़ी लिस्ट डालने पर, IllegalStateException क्रैश हो जाता है. फ़्लेक्सिबल ग्रिड ट्रैक में लेज़ी सूचियों को सुरक्षित तरीके से रखने के लिए, आपको GridTrackSize.MinMax साइज़ (जैसे, minmax(0.dp, 1.fr)) का इस्तेमाल करना होगा. इससे इंट्रिन्सिक मेज़रमेंट पास को बायपास किया जा सकता है.

सबसे सही तरीके

• बड़े और साफ़ तौर पर दिखने वाले लूप के बजाय, लेज़ी लिस्ट का इस्तेमाल करें: स्ट्रक्चर्ड Grid में बड़े या डाइनैमिक डेटासेट दिखाने के लिए, आइटम पर बड़े और साफ़ तौर पर दिखने वाले लूप बनाने के बजाय, ग्रिड के खास सेल में लेज़ी कॉम्पोनेंट (आम तौर पर, LazyColumn या LazyRow) एम्बेड करें. ऐसा इसलिए, क्योंकि Grid आइटम को रीसाइकल नहीं करता और इसमें ज़्यादा से ज़्यादा 1,000 ट्रैक हो सकते हैं.
• लेज़ी लिस्ट के लिए MinMax ट्रैक साइज़िंग का इस्तेमाल करें: LazyColumn और LazyRow, इंट्रिन्सिक मेज़रमेंट पास के साथ काम नहीं करते (SubcomposeLayout देखें). इसलिए, लेज़ी कॉम्पोनेंट को होस्ट करने वाले फ़्लेक्सिबल ट्रैक पर GridTrackSize.MinMax का इस्तेमाल करें, ताकि इंट्रिन्सिक मेज़रमेंट को सुरक्षित तरीके से बायपास किया जा सके.

सामग्री

• Grid: कंपोज़ेबल लेआउट, जो आइटम को दो-डाइमेंशन वाले ग्रिड स्ट्रक्चर में रखता है. इसे साफ़ तौर पर पंक्ति और कॉलम ट्रैक का इस्तेमाल करके कॉन्फ़िगर किया जाता है.
• LazyColumn: वर्टिकल स्क्रोलिंग लिस्ट, जो सिर्फ़ स्क्रीन पर दिख रहे आइटम को कंपोज़ और रीसाइकल करती है.
• GridTrackSize.MinMax: ट्रैक साइज़िंग प्रॉपर्टी, जो फ़्लेक्सिबल बाउंड (min और max) तय करती है. इससे लेज़ी कॉम्पोनेंट को सुरक्षित तरीके से होस्ट किया जा सकता है. साथ ही, रनटाइम मेज़रमेंट क्रैश होने की समस्या भी नहीं होती.
• gridItem: Compose Modifier एक्सटेंशन, जो किसी चाइल्ड यूज़र इंटरफ़ेस (यूआई) एलिमेंट को Grid में मौजूद किसी खास सेल या नाम वाले हिस्से को असाइन करता है.

चरण

सेमैंटिक एरिया आइडेंटिफ़ायर तय करके, अपनी स्क्रीन का लेआउट बनाएं. साथ ही, लेज़ी लिस्ट के साथ काम करने के लिए, minmax साइज़ के साथ ग्रिड ट्रैक कॉन्फ़िगर करें. इसके अलावा, ग्रिड कॉन्टेंट एरिया में LazyColumn को एम्बेड करें.

1. ग्रिड ट्रैक और नाम वाले एरिया कॉन्फ़िगर करना

अपनी स्क्रीन के लेआउट के अलग-अलग हिस्सों को दिखाने के लिए, enum क्लास बनाएं. साथ ही, अपने लेआउट ट्रैक और नाम वाले हिस्सों के लिए, GridConfigurationScope लैम्ब्डा तय करें. हेडर और फ़ुटर की पंक्तियों के लिए GridTrackSize.MaxContent का इस्तेमाल करें, ताकि वे अपने कॉन्टेंट के डाइमेंशन के हिसाब से फ़िट हो सकें. साथ ही, लेज़ी लिस्ट को होस्ट करने वाले कॉन्टेंट ट्रैक के लिए minmax(0.dp, 1.fr) का इस्तेमाल करें, ताकि बिना काम के इंट्रिन्सिक मेज़रमेंट के बारे में क्वेरी किए बिना, ज़रूरत के हिसाब से स्पेस दिया जा सके:

enum class ScreenArea {
    Header,
    Content,
    Footer
}


val lazyConfig: GridConfigurationScope.() -> Unit = {
    column(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)
    row(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)

    area(ScreenArea.Header, row = 1, column = 1)
    area(ScreenArea.Content, row = 2, column = 1)
    area(ScreenArea.Footer, row = 3, column = 1)
    gap(8.dp)
}
GridByExamples.kt

2. ग्रिड में स्टैटिक कॉम्पोनेंट जोड़ना

अपने कंपोज़ेबल में, Grid कंटेनर में lazyConfig पास करें. content लैम्डा के अंदर, स्टैटिक कॉम्पोनेंट (हेडर और फ़ुटर) डालें. साथ ही, Modifier.gridItem() का इस्तेमाल करके, उन्हें उनके एरिया आइडेंटिफ़ायर के साथ रखें.

3. कॉन्टेंट वाले हिस्से में LazyColumn को एम्बेड करना

कॉन्टेंट सेल में, Modifier.gridItem(ScreenArea.Content) का इस्तेमाल करके LazyColumn को एम्बेड करें. कॉन्टेंट ट्रैक को पहले चरण में minmax(0.dp, 1.fr) के साथ कॉन्फ़िगर किया गया था, इसलिए LazyColumn बिना किसी गड़बड़ी के, स्क्रोल करने पर आइटम को मेज़र और रीसाइकल कर सकता है. इसके लिए, उसे काम न करने वाले इंट्रिन्सिक डाइमेंशन के बारे में क्वेरी करने की ज़रूरत नहीं पड़ती:

@Composable
fun GridWithLazyColumn(
    modifier: Modifier = Modifier,
    items: List<String> = emptyList(),
) {
    Grid(
        modifier = modifier.fillMaxSize(),
        config = lazyConfig
    ) {
        Text("Header", Modifier.gridItem(ScreenArea.Header).padding(16.dp))
        Text("Footer", Modifier.gridItem(ScreenArea.Footer).padding(16.dp))

        // LazyColumn placed in the content area for large datasets
        LazyColumn(
            modifier = Modifier
                .gridItem(ScreenArea.Content)
                .fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Text(item, Modifier.padding(16.dp))
            }
        }
    }
}
GridByExamples.kt

नतीजे

आपके स्क्रीन लेआउट में अब Grid एपीआई का इस्तेमाल किया जाता है. इससे, दो डाइमेंशन वाले पेज के स्ट्रक्चर को तय किया जाता है. साथ ही, minmax साइज़ वाले फ़्लेक्सिबल ट्रैक में LazyColumn को एम्बेड किया जाता है, ताकि सूची के आइटम को बेहतर तरीके से रीसाइकल किया जा सके और रनटाइम के दौरान होने वाली गड़बड़ियों से बचा जा सके.

अन्य संसाधन

• Jetpack Compose में ग्रिड
• कंटेनर की प्रॉपर्टी सेट करना
• लेज़ी लिस्ट और लेज़ी ग्रिड