Jetpack Compose में LazyColumn — यह क्या है, गुण और यह कैसे काम करता है

Jetpack Compose में LazyColumn क्या है

LazyColumn एक composable फ़ंक्शन है जो लेज़ी लोडिंग के साथ एक वर्टिकल स्क्रॉल करने योग्य सूची लागू करता है। Column के विपरीत जो सभी चाइल्ड तत्वों को एक साथ रेंडर करता है, LazyColumn केवल उन तत्वों को बनाता है जो व्यूपोर्ट में आते हैं।

LazyColumn में लेज़ी लोडिंग तंत्र तत्व पुनः उपयोग पर आधारित है: जब कोई तत्व स्क्रॉल करने पर छिप जाता है, तो उसकी composition और layout को एक नए प्रदर्शित तत्व के लिए पुनः उपयोग किया जा सकता है। यह मेमोरी और CPU समय बचाता है, विशेष रूप से लंबी सूचियों पर।

Android Developers Blog, 2024 के अनुसार, LazyColumn महत्वपूर्ण प्रदर्शन गिरावट के बिना दसियों हज़ार तत्वों की सूचियों को कुशलतापूर्वक संभाल सकता है। LazyColumn में प्रत्येक तत्व के पास एक कुंजी (key) होती है जो Compose को सूची बदलने पर तत्व की स्थिति की पहचान करने और संरक्षित करने में मदद करती है।

LazyColumn का मूल सिग्नेचर

LazyColumn पैरामीटर modifier, state, contentPadding, reverseLayout, verticalArrangement और horizontalAlignment स्वीकार करता है। सामग्री DSL फ़ंक्शन items और item के माध्यम से लैम्ब्डा ब्लॉक में परिभाषित की जाती है।

@Composable
fun SimpleLazyColumn() {
    val itemsList = (1..100).toList()
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(itemsList) { item ->
            Text(text = "आइटम $item")
        }
    }
}

LazyColumn के पैरामीटर: items और item

LazyColumn का DSL ब्लॉक सामग्री जोड़ने के लिए items और item फ़ंक्शन प्रदान करता है। items तत्व बनाने के लिए डेटा संग्रह, एक कुंजी और फ़ैक्टरी फ़ंक्शन स्वीकार करता है। item सूची में एकल स्थिर तत्व जोड़ता है।

itemsIndexed items का एक प्रकार है जो डेटा के अतिरिक्त तत्व इंडेक्स भी पास करता है। यह तब उपयोगी होता है जब आपको अलग गणना के बिना तत्व की स्थिति जानने की आवश्यकता हो। items(size) केवल तत्वों की संख्या और फ़ैक्टरी स्वीकार करता है बिना किसी संग्रह से बंधे।

items में key पैरामीटर प्रत्येक तत्व की विशिष्ट पहचान करता है। Material Design Guidelines, 2025 के अनुसार, कुंजियाँ तत्वों को अपडेट और एनिमेट करते समय प्रदर्शन में सुधार करती हैं, क्योंकि Compose कुंजी द्वारा किसी विशिष्ट तत्व की गति या परिवर्तन को ट्रैक कर सकता है।

विभिन्न तत्व प्रकारों के साथ उदाहरण

contentType के साथ items फ़ंक्शन LazyColumn को विभिन्न प्रकार के तत्वों के पुनः उपयोग को अनुकूलित करने की अनुमति देता है। नीचे दिए गए उदाहरण में एक सूची में सेक्शन हेडर और सामान्य पंक्तियों का उपयोग किया गया है।

@Composable
fun MixedItemsList() {
    LazyColumn {
        item {
            Text(
                text = "शीर्षक",
                style = MaterialTheme.typography.headlineMedium
            )
        }
        items(
            items = (1..20).toList(),
            key = { it },
            contentType = { "item" }
        ) { item ->
            Text(text = "पंक्ति $item")
        }
    }
}

LazyListState और स्क्रॉल प्रबंधन

LazyListState LazyColumn की एक स्थिति ऑब्जेक्ट है जो वर्तमान स्क्रॉल स्थिति, पहले दृश्य तत्व और ऑफ़सेट को ट्रैक करता है। इसे rememberLazyListState() के माध्यम से बनाया जा सकता है और LazyColumn के state पैरामीटर में पास किया जा सकता है।

LazyListState किसी विशिष्ट तत्व पर प्रोग्रामेटिक स्क्रॉलिंग के लिए animateScrollToItem और scrollToItem विधियाँ प्रदान करता है। animateScrollToItem एक स्मूथ स्क्रॉल एनिमेशन बनाता है, जबकि scrollToItem तुरंत स्क्रॉल करता है। दोनों विधियों को CompositionContext में coroutine के अंदर कॉल करने की आवश्यकता होती है।

Android Developers, 2024 के अनुसार, LazyListState में layoutInfo भी होता है जो दृश्य तत्वों के बारे में जानकारी प्रदान करता है — उनके इंडेक्स, ऑफ़सेट और आकार। यह एनालिटिक्स, व्यू ट्रैकिंग या अनंत स्क्रॉलिंग लागू करने के लिए उपयोगी है।

प्रोग्रामेटिक स्क्रॉलिंग के साथ उदाहरण

इस उदाहरण में, LazyColumn को LazyListState के माध्यम से नियंत्रित किया जाता है। एक बटन सूची को इंडेक्स 50 वाले तत्व तक स्मूथ एनिमेशन के साथ स्क्रॉल करता है।

@Composable
fun ScrollableList() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("50 पर स्क्रॉल करें")
        }

        LazyColumn(state = listState) {
            items((1..100).toList()) { item ->
                Text(
                    text = "आइटम $item",
                    modifier = Modifier.padding(8.dp)
                )
            }
        }
    }
}

LazyColumn के प्रदर्शन का अनुकूलन

LazyColumn का प्रमुख प्रदर्शन कारक कुंजियों का सही उपयोग है। प्रत्येक तत्व में key पैरामीटर के माध्यम से एक अद्वितीय स्थिर कुंजी होनी चाहिए। कुंजियों के बिना, Compose डेटा बदलने पर तत्वों को सही ढंग से पुनः उपयोग नहीं कर सकता, जिससे पुनर्संरचना होती है।

contentType LazyColumn को बताता है कि किन तत्वों का layout प्रकार समान है। जब समान contentType वाले दो तत्व रीसाइक्लिंग पूल में प्रवेश करते हैं, तो LazyColumn बिना पुनर्संरचना के उनके layout का पुनः उपयोग कर सकता है। Android Developers Blog, 2024 के अनुसार, contentType विभिन्न तत्व प्रकारों वाली सूचियों में प्रदर्शन में 30–50% सुधार करता है।

LazyColumn के लिए फ़ैक्टरी फ़ंक्शन में अस्थिर पैरामीटर से बचना भी महत्वपूर्ण है। हर बार जब कोई तत्व पैरामीटर बदलता है, Compose उस तत्व को पुनर्संरचित करता है। स्थिर मानों के लिए remember और derivedStateOf का उपयोग पुनर्संरचना की संख्या को कम करता है।

प्रदर्शन कारक तालिका

LazyColumn में Sticky headers और सेक्शन

stickyHeader LazyColumn का एक DSL फ़ंक्शन है जो स्क्रॉल करने पर सेक्शन हेडर को सूची के शीर्ष पर पिन करता है। जब अगला सेक्शन शीर्ष पर पहुँचता है, तो उसका हेडर वर्तमान हेडर को बदल देता है। यह व्यवहार उपयोगकर्ताओं के लिए संपर्क सूचियों और कैलेंडर से परिचित है।

stickyHeader item के समान एक कुंजी और फ़ैक्टरी फ़ंक्शन स्वीकार करता है। सामान्य item के विपरीत, stickyHeader अपने सेक्शन की सामग्री के माध्यम से स्क्रॉल करते समय दृश्य रहता है। जब कोई सेक्शन पूरी तरह से स्क्रॉल हो जाता है, तो अगले सेक्शन का हेडर पिछले हेडर को बाहर धकेल देता है।

Material Design Guidelines, 2025 के अनुसार, sticky headers लंबी सूचियों में नेविगेशन में सुधार करते हैं और उपयोगकर्ता पर संज्ञानात्मक भार कम करते हैं। sticky header लागू करने के लिए, बस items तत्वों के सापेक्ष सही स्थिति में सेक्शन हेडर को stickyHeader में लपेटें।

@Composable
fun SectionedList(sections: Map<String, List<String>>) {
    LazyColumn {
        sections.forEach { (header, items) ->
            stickyHeader {
                Text(
                    text = header,
                    modifier = Modifier.background(Color.White)
                        .padding(16.dp)
                )
            }
            items(items) { item ->
                Text(text = item, modifier = Modifier.padding(8.dp))
            }
        }
    }
}