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

Grid कंपोज़ेबल, स्ट्रक्चरल और 2D स्क्रीन लेआउट बनाता है. 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: 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. ग्रिड में स्टैटिक कॉम्पोनेंट रखना

अपने कंपोज़ेबल में, lazyConfig को Grid कंटेनर में पास करें. 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 में ग्रिड
• कंटेनर प्रॉपर्टी सेट करना
• लेज़ी लिस्ट और लेज़ी ग्रिड