लिस्ट और ग्रिड

कई ऐप्लिकेशन को आइटम के कलेक्शन दिखाने की ज़रूरत होती है. इस दस्तावेज़ में बताया गया है कि Jetpack Compose में, इसे बेहतर तरीके से कैसे किया जा सकता है.

अगर आपको पता है कि आपके इस्तेमाल के उदाहरण में स्क्रोल करने की ज़रूरत नहीं है, तो आपके पास Column या Row (दिशा के आधार पर) का इस्तेमाल करने का विकल्प है. साथ ही, सूची को इस तरह दोहराकर हर आइटम का कॉन्टेंट दिखाया जा सकता है:

@Composable
fun MessageList(messages: List<Message>) {
    Column {
        messages.forEach { message ->
            MessageRow(message)
        }
    }
}
LazyListSnippets.kt

verticalScroll() मॉडिफ़ायर का इस्तेमाल करके, Column को स्क्रोल किया जा सकता है.

लेज़ी लिस्ट

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

Compose, कॉम्पोनेंट का एक सेट उपलब्ध कराता है. यह सेट सिर्फ़ उन आइटम को कॉम्पोनेट में जोड़ता है और उनका लेआउट तय करता है जो कॉम्पोनेंट के व्यूपोर्ट में दिखते हैं. इन कॉम्पोनेंट में LazyColumn और LazyRow शामिल हैं.

जैसा कि नाम से पता चलता है, LazyColumn और LazyRow के बीच का अंतर यह है कि वे अपने आइटम किस ओर सेट करते हैं और किस ओर स्क्रोल करते हैं. LazyColumn का इस्तेमाल करने पर, वर्टिकल तौर पर स्क्रोल होने वाली सूची दिखती है. वहीं, LazyRow का इस्तेमाल करने पर, हॉरिज़ॉन्टल तौर पर स्क्रोल होने वाली सूची दिखती है.

लैज़ी कॉम्पोनेंट, Compose में मौजूद ज़्यादातर लेआउट से अलग होते हैं. लेज़ी कॉम्पोनेंट, @Composable कॉन्टेंट ब्लॉक पैरामीटर को स्वीकार करने के बजाय, LazyListScope.() ब्लॉक उपलब्ध कराते हैं. इससे ऐप्लिकेशन, कॉम्पोनेट को सीधे तौर पर एमिट कर पाते हैं. यह LazyListScope ब्लॉक, डीएसएल (डेटा स्टोरेज लैंग्वेज) की सुविधा देता है. इससे ऐप्लिकेशन, आइटम के कॉन्टेंट के बारे में जानकारी दे पाते हैं. इसके बाद, लेआउट और स्क्रोल पोज़िशन के हिसाब से, हर आइटम का कॉन्टेंट जोड़ने की ज़िम्मेदारी, लैज़ी कॉम्पोनेंट की होती है.

LazyListScope डीएसएल

LazyListScope का डीएसएल, लेआउट में आइटम के बारे में बताने के लिए कई फ़ंक्शन उपलब्ध कराता है. सबसे बुनियादी तौर पर, item() एक आइटम जोड़ता है और items(Int) कई आइटम जोड़ता है:

LazyColumn {
    // Add a single item
    item {
        Text(text = "First item")
    }

    // Add 5 items
    items(5) { index ->
        Text(text = "Item: $index")
    }

    // Add another single item
    item {
        Text(text = "Last item")
    }
}
LazyListSnippets.kt

एक्सटेंशन के कई फ़ंक्शन भी हैं जिनकी मदद से, आइटम के कलेक्शन जोड़े जा सकते हैं. जैसे, List. इन एक्सटेंशन की मदद से, ऊपर दिए गए Column उदाहरण को आसानी से माइग्रेट किया जा सकता है:

/**
 * import androidx.compose.foundation.lazy.items
 */
LazyColumn {
    items(messages) { message ->
        MessageRow(message)
    }
}
LazyListSnippets.kt

items() एक्सटेंशन फ़ंक्शन का एक वैरिएंट भी है, जिसे itemsIndexed() कहा जाता है. यह इंडेक्स उपलब्ध कराता है. ज़्यादा जानकारी के लिए, कृपया LazyListScope रेफ़रंस देखें.

लेज़ी ग्रिड

LazyVerticalGrid और LazyHorizontalGrid कॉम्पोनेंट, आइटम को ग्रिड में दिखाने की सुविधा देते हैं. लेज़ी वर्टिकल ग्रिड, अपने आइटम को वर्टिकल तौर पर स्क्रोल किए जा सकने वाले कंटेनर में दिखाएगा. यह कंटेनर, कई कॉलम में फैला होगा. वहीं, लेज़ी हॉरिज़ॉन्टल ग्रिड, हॉरिज़ॉन्टल ऐक्सिस पर भी इसी तरह काम करेंगे.

ग्रिड में, सूचियों की तरह ही बेहतर API की सुविधाएं होती हैं. साथ ही, ये कॉन्टेंट के बारे में बताने के लिए, एक जैसे डीएसएल - LazyGridScope.() का इस्तेमाल करते हैं.

फ़ोटो का ग्रिड दिखाने वाले फ़ोन का स्क्रीनशॉट

LazyVerticalGrid में मौजूद columns पैरामीटर और LazyHorizontalGrid में मौजूद rows पैरामीटर से यह कंट्रोल होता है कि सेल को कॉलम या पंक्तियों में कैसे बनाया जाए. नीचे दिए गए उदाहरण में, आइटम को ग्रिड में दिखाया गया है. इसके लिए, हर कॉलम को कम से कम 128.dp चौड़ा करने के लिए, GridCells.Adaptive का इस्तेमाल किया गया है:

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 128.dp)
) {
    items(photos) { photo ->
        PhotoItem(photo)
    }
}
LazyListSnippets.kt

LazyVerticalGrid की मदद से, आइटम की चौड़ाई तय की जा सकती है. इसके बाद, ग्रिड में ज़्यादा से ज़्यादा कॉलम फ़िट हो जाएंगे. कॉलम की संख्या का हिसाब लगाने के बाद, बाकी बची चौड़ाई को कॉलम के बीच बराबर बांटा जाता है. साइज़ तय करने का यह अडैप्टिव तरीका, अलग-अलग स्क्रीन साइज़ पर आइटम के सेट दिखाने के लिए खास तौर पर मददगार होता है.

अगर आपको इस्तेमाल किए जाने वाले कॉलम की सटीक संख्या पता है, तो ज़रूरी कॉलम की संख्या वाले GridCells.Fixed का उदाहरण दिया जा सकता है.

अगर आपके डिज़ाइन में सिर्फ़ कुछ आइटम के लिए स्टैंडर्ड डाइमेंशन की ज़रूरत है, तो आइटम के लिए कस्टम कॉलम स्पैन देने के लिए, ग्रिड सपोर्ट का इस्तेमाल किया जा सकता है. LazyGridScope DSL item और items तरीकों के span पैरामीटर की मदद से, कॉलम स्पैन तय करें. maxLineSpan, स्पान स्कोप की वैल्यू में से एक है. यह तब खास तौर पर काम आता है, जब अडैप्टिव साइज़िंग का इस्तेमाल किया जा रहा हो. इसकी वजह यह है कि कॉलम की संख्या तय नहीं होती. इस उदाहरण में, पूरी पंक्ति का स्पैन देने का तरीका बताया गया है:

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 30.dp)
) {
    item(span = {
        // LazyGridItemSpanScope:
        // maxLineSpan
        GridItemSpan(maxLineSpan)
    }) {
        CategoryCard("Fruits")
    }
    // ...
}
LazyListSnippets.kt

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

LazyVerticalStaggeredGrid और LazyHorizontalStaggeredGrid, ऐसे कॉम्पोज़ेबल हैं जिनकी मदद से, आइटम का ऐसा ग्रिड बनाया जा सकता है जो धीरे-धीरे लोड होता है और जिसके आइटम अलग-अलग लेवल पर होते हैं. लेज़ी वर्टिकल स्टैगर्ड ग्रिड, अपने आइटम को वर्टिकल तौर पर स्क्रोल किए जा सकने वाले कंटेनर में दिखाता है. यह कंटेनर कई कॉलम में फैला होता है और अलग-अलग आइटम की ऊंचाई अलग-अलग हो सकती है. अलग-अलग चौड़ाई वाले आइटम के साथ, लेज़ी हॉरिज़ॉन्टल ग्रिड की परफ़ॉर्मेंस, हॉरिज़ॉन्टल ऐक्सिस पर एक जैसी होती है.

यहां दिया गया स्निपेट, हर आइटम के लिए 200.dp चौड़ाई के साथ LazyVerticalStaggeredGrid का इस्तेमाल करने का एक बुनियादी उदाहरण है:

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Adaptive(200.dp),
    verticalItemSpacing = 4.dp,
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    content = {
        items(randomSizedPhotos) { photo ->
            AsyncImage(
                model = photo,
                contentScale = ContentScale.Crop,
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
            )
        }
    },
    modifier = Modifier.fillMaxSize()
)
LazyListSnippets.kt

पहली इमेज. धीरे-धीरे रैंक में बढ़ने वाले वर्टिकल ग्रिड का उदाहरण

कॉलम की तय संख्या सेट करने के लिए, StaggeredGridCells.Adaptive के बजाय StaggeredGridCells.Fixed(columns) का इस्तेमाल किया जा सकता है. यह उपलब्ध चौड़ाई को कॉलम की संख्या (या हॉरिज़ॉन्टल ग्रिड के लिए लाइनों) से divide करता है. साथ ही, हर आइटम को वह चौड़ाई (या हॉरिज़ॉन्टल ग्रिड के लिए ऊंचाई) देता है:

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Fixed(3),
    verticalItemSpacing = 4.dp,
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    content = {
        items(randomSizedPhotos) { photo ->
            AsyncImage(
                model = photo,
                contentScale = ContentScale.Crop,
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
            )
        }
    },
    modifier = Modifier.fillMaxSize()
)
LazyListSnippets.kt

Compose में, इमेज का लेज़ी ग्रिड
दूसरी इमेज. तय कॉलम वाले लेज़ी स्टैगर वर्टिकल ग्रिड का उदाहरण

कॉन्टेंट पैडिंग

कभी-कभी आपको कॉन्टेंट के किनारों पर पैडिंग जोड़नी पड़ सकती है. लैज़ी कॉम्पोनेंट की मदद से, contentPadding पैरामीटर में कुछ PaddingValues पास किए जा सकते हैं, ताकि यह काम कर सके:

LazyColumn(
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
) {
    // ...
}
LazyListSnippets.kt

इस उदाहरण में, हम हॉरिज़ॉन्टल किनारों (बाईं और दाईं ओर) पर 16.dp पैडिंग जोड़ते हैं. इसके बाद, कॉन्टेंट के ऊपर और नीचे 8.dp पैडिंग जोड़ते हैं.

कृपया ध्यान दें कि यह पैडिंग, कॉन्टेंट पर लागू होती है, न कि LazyColumn पर. ऊपर दिए गए उदाहरण में, पहले आइटम के ऊपर 8.dp padding जोड़ा जाएगा, आखिरी आइटम के नीचे 8.dp padding जोड़ा जाएगा, और सभी आइटम के बाईं और दाईं ओर 16.dp padding जोड़ा जाएगा.

कॉन्टेंट के बीच की स्पेस

आइटम के बीच में स्पेस जोड़ने के लिए, Arrangement.spacedBy() का इस्तेमाल किया जा सकता है. नीचे दिए गए उदाहरण में, हर आइटम के बीच में 4.dp स्पेस जोड़ा गया है:

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(4.dp),
) {
    // ...
}
LazyListSnippets.kt

इसी तरह, LazyRow के लिए:

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(4.dp),
) {
    // ...
}
LazyListSnippets.kt

हालांकि, ग्रिड में वर्टिकल और हॉरिज़ॉन्टल, दोनों तरह के क्रम में आइटम व्यवस्थित किए जा सकते हैं:

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    verticalArrangement = Arrangement.spacedBy(16.dp),
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    items(photos) { item ->
        PhotoItem(item)
    }
}
LazyListSnippets.kt

आइटम की कुंजियां

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

इस समस्या से निपटने के लिए, हर आइटम के लिए एक स्थिर और यूनीक कुंजी दी जा सकती है. इसके लिए, key पैरामीटर को ब्लॉक किया जा सकता है. स्टैबल पासकोड देने से, डेटा सेट में होने वाले बदलावों के बावजूद आइटम की स्थिति एक जैसी रहती है:

LazyColumn {
    items(
        items = messages,
        key = { message ->
            // Return a stable + unique key for the item
            message.id
        }
    ) { message ->
        MessageRow(message)
    }
}
LazyListSnippets.kt

बटन दबाकर, Compose को क्रम में बदलने की सुविधा को सही तरीके से इस्तेमाल करने में मदद मिलती है. उदाहरण के लिए, अगर आपके आइटम में सेव की गई स्थिति है, तो सेटिंग बटन की मदद से, Compose को आइटम की स्थिति बदलने पर, इस स्थिति को आइटम के साथ ले जाने की अनुमति मिलेगी.

LazyColumn {
    items(books, key = { it.id }) {
        val rememberedValue = remember {
            Random.nextInt()
        }
    }
}
LazyListSnippets.kt

हालांकि, आइटम की कुंजियों के तौर पर कुछ खास तरह के आइटम का इस्तेमाल किया जा सकता है. बटन के टाइप के साथ Bundle काम करना चाहिए. यह Android का एक तरीका है, जिसकी मदद से ऐक्टिविटी को फिर से शुरू करने पर, उसकी स्थितियों को बनाए रखा जाता है. Bundle, प्राइमिटिव, सूचियों या Parcelables जैसे टाइप के साथ काम करता है.

LazyColumn {
    items(books, key = {
        // primitives, enums, Parcelable, etc.
    }) {
        // ...
    }
}
LazyListSnippets.kt

यह ज़रूरी है कि बटन, Bundle के साथ काम करता हो, ताकि ऐक्टिविटी को फिर से बनाने पर, आइटम कॉम्पोज़ेबल में मौजूद rememberSaveable को वापस लाया जा सके. इसके अलावा, इस आइटम से स्क्रोल करके वापस आने पर भी, rememberSaveable को वापस लाया जा सकता है.

LazyColumn {
    items(books, key = { it.id }) {
        val rememberedValue = rememberSaveable {
            Random.nextInt()
        }
    }
}
LazyListSnippets.kt

आइटम के ऐनिमेशन

अगर आपने RecyclerView विजेट का इस्तेमाल किया है, तो आपको पता होगा कि यह आइटम में हुए बदलावों को ऐनिमेशन के साथ दिखाता है. आइटम के क्रम में बदलाव करने के लिए, लेज़ी लेआउट में भी वही फ़ंक्शन मिलते हैं जो अन्य लेआउट में मिलते हैं. एपीआई का इस्तेमाल करना आसान है - आपको सिर्फ़ आइटम के कॉन्टेंट में animateItem बदलाव करने वाला टूल सेट करना होगा:

LazyColumn {
    // It is important to provide a key to each item to ensure animateItem() works as expected.
    items(books, key = { it.id }) {
        Row(Modifier.animateItem()) {
            // ...
        }
    }
}
LazyListSnippets.kt

ज़रूरत पड़ने पर, कस्टम एनीमेशन की जानकारी भी दी जा सकती है:

LazyColumn {
    items(books, key = { it.id }) {
        Row(
            Modifier.animateItem(
                fadeInSpec = tween(durationMillis = 250),
                fadeOutSpec = tween(durationMillis = 100),
                placementSpec = spring(stiffness = Spring.StiffnessLow, dampingRatio = Spring.DampingRatioMediumBouncy)
            )
        ) {
            // ...
        }
    }
}
LazyListSnippets.kt

पक्का करें कि आपने अपने आइटम के लिए कुंजियां दी हों, ताकि मूव किए गए एलिमेंट की नई जगह ढूंढी जा सके.

स्टिक हेडर (प्रयोग के तौर पर उपलब्ध)

ग्रुप किए गए डेटा की सूचियां दिखाते समय, 'स्टिकी हेडर' पैटर्न मददगार होता है. यहां 'संपर्क सूची' का एक उदाहरण दिया गया है. इसमें हर संपर्क के नाम के पहले अक्षर के हिसाब से ग्रुप किया गया है:

फ़ोन पर संपर्कों की सूची को ऊपर और नीचे स्क्रोल करने का वीडियो

LazyColumn के साथ स्टिक हेडर पाने के लिए, हेडर कॉन्टेंट उपलब्ध कराकर, एक्सपेरिमेंट के तौर पर उपलब्ध stickyHeader() फ़ंक्शन का इस्तेमाल किया जा सकता है:

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ListWithHeader(items: List<Item>) {
    LazyColumn {
        stickyHeader {
            Header()
        }

        items(items) { item ->
            ItemRow(item)
        }
    }
}
LazyListSnippets.kt

ऊपर दिए गए 'संपर्कों की सूची' के उदाहरण की तरह, एक से ज़्यादा हेडर वाली सूची बनाने के लिए, ये काम किए जा सकते हैं:

// This ideally would be done in the ViewModel
val grouped = contacts.groupBy { it.firstName[0] }

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ContactsList(grouped: Map<Char, List<Contact>>) {
    LazyColumn {
        grouped.forEach { (initial, contactsForInitial) ->
            stickyHeader {
                CharacterHeader(initial)
            }

            items(contactsForInitial) { contact ->
                ContactListItem(contact)
            }
        }
    }
}
LazyListSnippets.kt

स्क्रोल की पोज़िशन के हिसाब से प्रतिक्रिया देना

कई ऐप्लिकेशन को स्क्रोल की पोज़िशन और आइटम के लेआउट में होने वाले बदलावों पर प्रतिक्रिया देने और उन्हें सुनने की ज़रूरत होती है. LazyListState को होस्ट करके, लेज़ी कॉम्पोनेंट इस इस्तेमाल के उदाहरण के साथ काम करते हैं:

@Composable
fun MessageList(messages: List<Message>) {
    // Remember our own LazyListState
    val listState = rememberLazyListState()

    // Provide it to LazyColumn
    LazyColumn(state = listState) {
        // ...
    }
}
LazyListSnippets.kt

आम तौर पर, ऐप्लिकेशन को सिर्फ़ दिखने वाले पहले आइटम के बारे में जानकारी चाहिए. इसके लिए, LazyListState, firstVisibleItemIndex और firstVisibleItemScrollOffset प्रॉपर्टी उपलब्ध कराता है.

अगर हम उपयोगकर्ता के पहले आइटम को स्क्रोल करने के आधार पर, बटन को दिखाने और छिपाने के उदाहरण का इस्तेमाल करते हैं, तो:

@Composable
fun MessageList(messages: List<Message>) {
    Box {
        val listState = rememberLazyListState()

        LazyColumn(state = listState) {
            // ...
        }

        // Show the button if the first visible item is past
        // the first item. We use a remembered derived state to
        // minimize unnecessary compositions
        val showButton by remember {
            derivedStateOf {
                listState.firstVisibleItemIndex > 0
            }
        }

        AnimatedVisibility(visible = showButton) {
            ScrollToTopButton()
        }
    }
}
LazyListSnippets.kt

सीधे कंपोज़िशन में स्टेटस पढ़ना तब फ़ायदेमंद होता है, जब आपको अन्य यूज़र इंटरफ़ेस (यूआई) कॉम्पोज़ेबल अपडेट करने हों. हालांकि, ऐसे भी मामले होते हैं जहां इवेंट को उसी कंपोज़िशन में मैनेज करने की ज़रूरत नहीं होती. इसका एक सामान्य उदाहरण यह है कि जब उपयोगकर्ता किसी खास पॉइंट तक स्क्रोल कर लेता है, तो Analytics इवेंट भेजा जाता है. इसे बेहतर तरीके से मैनेज करने के लिए, हम snapshotFlow() का इस्तेमाल कर सकते हैं:

val listState = rememberLazyListState()

LazyColumn(state = listState) {
    // ...
}

LaunchedEffect(listState) {
    snapshotFlow { listState.firstVisibleItemIndex }
        .map { index -> index > 0 }
        .distinctUntilChanged()
        .filter { it }
        .collect {
            MyAnalyticsService.sendScrolledPastFirstItemEvent()
        }
}
LazyListSnippets.kt

LazyListState, layoutInfo प्रॉपर्टी के ज़रिए, स्क्रीन पर दिख रहे सभी आइटम और उनके बॉउंड के बारे में भी जानकारी देता है. ज़्यादा जानकारी के लिए, LazyListLayoutInfo क्लास देखें.

स्क्रोल की पोज़िशन कंट्रोल करना

स्क्रोल की स्थिति पर प्रतिक्रिया देने के साथ-साथ, ऐप्लिकेशन के लिए स्क्रोल की स्थिति को कंट्रोल करना भी मददगार होता है. LazyListState इसके लिए, scrollToItem() फ़ंक्शन का इस्तेमाल किया जाता है. यह फ़ंक्शन, स्क्रॉल की पोज़िशन को 'तुरंत' स्नैप करता है. साथ ही, animateScrollToItem() ऐनिमेशन (इसे स्मूद स्क्रॉल भी कहा जाता है) का इस्तेमाल करके स्क्रॉल करता है:

@Composable
fun MessageList(messages: List<Message>) {
    val listState = rememberLazyListState()
    // Remember a CoroutineScope to be able to launch
    val coroutineScope = rememberCoroutineScope()

    LazyColumn(state = listState) {
        // ...
    }

    ScrollToTopButton(
        onClick = {
            coroutineScope.launch {
                // Animate scroll to the first item
                listState.animateScrollToItem(index = 0)
            }
        }
    )
}
LazyListSnippets.kt

बड़े डेटा-सेट (पेजिंग)

पेजिंग लाइब्रेरी की मदद से, ऐप्लिकेशन में आइटम की बड़ी सूचियां दिखाई जा सकती हैं. साथ ही, ज़रूरत के हिसाब से सूची के छोटे हिस्से लोड और दिखाए जा सकते हैं. Paging 3.0 और इसके बाद के वर्शन में, androidx.paging:paging-compose लाइब्रेरी की मदद से Compose की सुविधा मिलती है.

पेज किए गए कॉन्टेंट की सूची दिखाने के लिए, हम collectAsLazyPagingItems() एक्सटेंशन फ़ंक्शन का इस्तेमाल कर सकते हैं. इसके बाद, LazyColumn में LazyPagingItems को items() में पास कर सकते हैं. व्यू में पेजिंग की सुविधा की तरह ही, डेटा लोड होने के दौरान प्लेसहोल्डर दिखाए जा सकते हैं. इसके लिए, यह देखें कि item null है या नहीं:

@Composable
fun MessageList(pager: Pager<Int, Message>) {
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it.id }
        ) { index ->
            val message = lazyPagingItems[index]
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }
    }
}
LazyListSnippets.kt

लेज़ी लेआउट इस्तेमाल करने के बारे में सलाह

यहां कुछ सुझाव दिए गए हैं. इनकी मदद से, यह पक्का किया जा सकता है कि आपके लेज़ी लेआउट सही तरीके से काम करें.

0 पिक्सल वाले आइटम इस्तेमाल करने से बचें

ऐसा तब हो सकता है, जब आपको बाद में अपनी सूची के आइटम भरने के लिए, इमेज जैसे कुछ डेटा को असिंक्रोनस तरीके से फिर से पाना हो. ऐसा होने पर, लेज़ी लेआउट अपने सभी आइटम को पहले मेज़रमेंट में कॉम्पोज़ कर देगा, क्योंकि उनकी ऊंचाई 0 पिक्सल है और वे सभी आइटम व्यूपोर्ट में फ़िट हो सकते हैं. आइटम लोड होने और उनकी ऊंचाई बढ़ने के बाद, लेज़ी लेआउट उन सभी आइटम को हटा देंगे जिन्हें पहली बार ज़रूरत से ज़्यादा कंपोज किया गया है. ऐसा इसलिए, क्योंकि वे व्यूपोर्ट में फ़िट नहीं हो सकते. इससे बचने के लिए, आपको अपने आइटम के लिए डिफ़ॉल्ट साइज़ सेट करना चाहिए, ताकि लेज़ी लेआउट यह सही तरीके से कैलकुलेट कर सके कि व्यूपोर्ट में कितने आइटम फ़िट हो सकते हैं:

@Composable
fun Item(imageUrl: String) {
    AsyncImage(
        model = rememberAsyncImagePainter(model = imageUrl),
        modifier = Modifier.size(30.dp),
        contentDescription = null
        // ...
    )
}
LazyListSnippets.kt

जब आपको डेटा के अलग-अलग समय पर लोड होने के बाद, अपने आइटम का अनुमानित साइज़ पता हो, तो यह पक्का करना अच्छा होता है कि आइटम का साइज़, लोड होने से पहले और बाद में एक जैसा रहे. उदाहरण के लिए, कुछ प्लेसहोल्डर जोड़कर. इससे स्क्रोल की सही पोज़िशन बनाए रखने में मदद मिलेगी.

एक ही दिशा में स्क्रोल किए जा सकने वाले कॉम्पोनेंट को नेस्ट करने से बचें

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

// throws IllegalStateException
Column(
    modifier = Modifier.verticalScroll(state)
) {
    LazyColumn {
        // ...
    }
}
LazyListSnippets.kt

इसके बजाय, एक ही नतीजा पाने के लिए, अपने सभी कॉम्पोज़ेबल को एक पैरंट LazyColumn में रैप करें. साथ ही, अलग-अलग तरह के कॉन्टेंट को पास करने के लिए, इसके डीएसएल का इस्तेमाल करें. इससे एक ही जगह पर, एक आइटम के साथ-साथ कई सूची आइटम भी उत्सर्जित किए जा सकते हैं:

LazyColumn {
    item {
        Header()
    }
    items(data) { item ->
        PhotoItem(item)
    }
    item {
        Footer()
    }
}
LazyListSnippets.kt

ध्यान रखें कि अलग-अलग दिशा वाले लेआउट को नेस्ट करने की अनुमति है. उदाहरण के लिए, स्क्रोल किए जा सकने वाले पैरंट Row और चाइल्ड LazyColumn:

Row(
    modifier = Modifier.horizontalScroll(scrollState)
) {
    LazyColumn {
        // ...
    }
}
LazyListSnippets.kt

साथ ही, ऐसे मामलों में भी जहां एक ही डायरेक्शन लेआउट का इस्तेमाल किया जाता है, लेकिन नेस्ट किए गए चाइल्ड एलिमेंट के लिए एक तय साइज़ भी सेट किया जाता है:

Column(
    modifier = Modifier.verticalScroll(scrollState)
) {
    LazyColumn(
        modifier = Modifier.height(200.dp)
    ) {
        // ...
    }
}
LazyListSnippets.kt

एक आइटम में एक से ज़्यादा एलिमेंट डालने से बचें

इस उदाहरण में, दूसरा आइटम लैम्ब्डा एक ब्लॉक में दो आइटम दिखाता है:

LazyVerticalGrid(
    columns = GridCells.Adaptive(100.dp)
) {
    item { Item(0) }
    item {
        Item(1)
        Item(2)
    }
    item { Item(3) }
    // ...
}
LazyListSnippets.kt

लेज़ी लेआउट, इस काम को उम्मीद के मुताबिक करेंगे - वे एलिमेंट को एक के बाद एक इस तरह से लेआउट करेंगे जैसे वे अलग-अलग आइटम हों. हालांकि, ऐसा करने में कुछ समस्याएं आ सकती हैं.

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

हालांकि, एक आइटम में कई एलिमेंट डालने के लिए, इस्तेमाल के मान्य उदाहरण हैं. जैसे, किसी सूची में डिवाइडर होना. आपको डिवाइडर से स्क्रोलिंग इंडेक्स में बदलाव नहीं कराना है, क्योंकि उन्हें अलग एलिमेंट नहीं माना जाना चाहिए. साथ ही, डिवाइडर छोटे होने की वजह से परफ़ॉर्मेंस पर असर नहीं पड़ेगा. डिवाइडर को तब दिखना चाहिए, जब उससे पहले का आइटम दिख रहा हो, ताकि वे पिछले आइटम का हिस्सा हो सकें:

LazyVerticalGrid(
    columns = GridCells.Adaptive(100.dp)
) {
    item { Item(0) }
    item {
        Item(1)
        Divider()
    }
    item { Item(2) }
    // ...
}
LazyListSnippets.kt

कस्टम क्रम का इस्तेमाल करें

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

ऐसा करने के लिए, कस्टम वर्टिकल Arrangement का इस्तेमाल करें और उसे LazyColumn में पास करें. नीचे दिए गए उदाहरण में, TopWithFooter ऑब्जेक्ट को सिर्फ़ arrange तरीका लागू करना होगा. सबसे पहले, यह आइटम को एक के बाद एक व्यवस्थित करेगा. दूसरी बात, अगर इस्तेमाल की गई कुल ऊंचाई, व्यूपोर्ट की ऊंचाई से कम है, तो फ़ुटर को सबसे नीचे रखा जाएगा:

object TopWithFooter : Arrangement.Vertical {
    override fun Density.arrange(
        totalSize: Int,
        sizes: IntArray,
        outPositions: IntArray
    ) {
        var y = 0
        sizes.forEachIndexed { index, size ->
            outPositions[index] = y
            y += size
        }
        if (y < totalSize) {
            val lastIndex = outPositions.lastIndex
            outPositions[lastIndex] = totalSize - sizes.last()
        }
    }
}
LazyListSnippets.kt

contentType जोड़ें

Compose 1.2 से, अपने लेज़ी लेआउट की परफ़ॉर्मेंस को बेहतर बनाने के लिए, अपनी सूचियों या ग्रिड में contentType जोड़ें. इसकी मदद से, लेआउट के हर आइटम के लिए कॉन्टेंट टाइप तय किया जा सकता है. ऐसा तब किया जाता है, जब कई तरह के आइटम वाली सूची या ग्रिड बनाई जा रही हो:

LazyColumn {
    items(elements, contentType = { it.type }) {
        // ...
    }
}
LazyListSnippets.kt

contentType का इस्तेमाल करने पर, Compose सिर्फ़ एक ही तरह के आइटम के बीच कॉम्पोज़िशन का फिर से इस्तेमाल कर सकता है. मिलते-जुलते स्ट्रक्चर वाले आइटम लिखने पर, फिर से इस्तेमाल करना ज़्यादा असरदार होता है. कॉन्टेंट टाइप देने से यह पक्का होता है कि Compose, टाइप B के किसी पूरी तरह से अलग आइटम के ऊपर टाइप A का आइटम लिखने की कोशिश न करे. इससे कॉम्पोज़िशन को फिर से इस्तेमाल करने और लेज़ी लेआउट की परफ़ॉर्मेंस के फ़ायदों को बढ़ाने में मदद मिलती है.

परफ़ॉर्मेंस मेज़र करना

रिलीज़ मोड में और R8 ऑप्टिमाइज़ेशन की सुविधा चालू होने पर ही, लेज़ी लेआउट की परफ़ॉर्मेंस को सही तरीके से मेज़र किया जा सकता है. डीबग बिल्ड पर, लेज़ी लेआउट स्क्रोलिंग धीमी हो सकती है. इस बारे में ज़्यादा जानने के लिए, कॉम्पोज़ की परफ़ॉर्मेंस लेख पढ़ें.