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

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

LazyRow — एक कम्पोज़ेबल फ़ंक्शन है जो तत्वों की आलसी लोडिंग के साथ एक क्षैतिज स्क्रॉल करने योग्य सूची लागू करता है। Row के विपरीत, जो सभी चाइल्ड तत्वों को एक साथ रेंडर करता है, LazyRow केवल दृश्य क्षेत्र में दिखाई देने वाले तत्व बनाता है।

LazyRow उसी सिद्धांत पर काम करता है जैसे LazyColumn, लेकिन तत्वों को क्षैतिज रूप से व्यवस्थित करता है। बाएँ या दाएँ स्क्रॉल करने पर, दृश्य क्षेत्र से बाहर निकलने वाले तत्वों का पुन: उपयोग नए तत्वों को प्रदर्शित करने के लिए किया जाता है। यह कई छवियों वाली गैलरी या लंबी श्रेणी सूचियों के लिए अत्यंत महत्वपूर्ण है।

Android Developers Blog, 2024 के अनुसार, LazyRow, LazyColumn के समान LazyList आर्किटेक्चर का उपयोग करता है, जिसमें LazyListState, Pool के माध्यम से पुन: उपयोग तंत्र और विभिन्न तत्व प्रकारों के लिए समर्थन शामिल है। अधिकतम दक्षता तत्वों की निश्चित ऊँचाई के साथ प्राप्त की जाती है।

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

LazyRow पैरामीटर modifier, state, contentPadding, reverseLayout, horizontalArrangement और verticalAlignment स्वीकार करता है। सामग्री को DSL फ़ंक्शन items और item के माध्यम से परिभाषित किया जाता है, जैसे LazyColumn में।

@Composable
fun SimpleLazyRow() {
    val items = (1..50).toList()
    LazyRow(
        modifier = Modifier.fillMaxWidth().height(100.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp)
    ) {
        items(items) { item ->
            Box(
                modifier = Modifier.size(80.dp).background(Color.Gray)
            ) {
                Text(text = "$item", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

LazyRow के गुण: horizontalArrangement और contentPadding

horizontalArrangement LazyRow के अंदर क्षैतिज अक्ष के साथ तत्वों के वितरण को प्रबंधित करता है। Row के समान Arrangement मान उपलब्ध हैं: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround और कस्टम स्पेसिंग के साथ spacedBy।

contentPadding LazyRow कंटेनर के किनारों पर पैडिंग जोड़ता है। Modifier.padding के विपरीत, contentPadding को स्क्रॉलिंग के दौरान ध्यान में रखा जाता है: पहले तत्व में बाएँ किनारे से पैडिंग होगी, अंतिम में दाएँ किनारे से। Material Design Guidelines, 2025 के अनुसार, कैरोसेल और गैलरी के लिए contentPadding अनिवार्य है ताकि पहला और अंतिम तत्व स्क्रीन के किनारे से चिपके नहीं।

verticalAlignment LazyRow के अंदर तत्वों को लंबवत रूप से संरेखित करता है। डिफ़ॉल्ट रूप से Alignment.Top का उपयोग किया जाता है। विभिन्न ऊँचाई के तत्वों को केंद्रित करने के लिए Alignment.CenterVertically का उपयोग करें, जो विभिन्न अनुपातों की छवियों वाले कैरोसेल के लिए उपयोगी है।

LazyRow पैरामीटर तालिका

LazyListState के साथ क्षैतिज स्क्रॉल प्रबंधन

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

LazyRow का प्रोग्रामेटिक स्क्रॉल नियंत्रण उन्हीं विधियों से किया जाता है: स्मूथ एनिमेशन के लिए animateScrollToItem और तत्काल स्क्रॉलिंग के लिए scrollToItem। दोनों को कोरूटीन के अंदर कॉल किया जाता है। यह बाएँ/दाएँ बटन वाले कैरोसेल या स्वचालित स्क्रॉलिंग के लिए उपयोगी है।

Android Developers, 2024 के अनुसार, LazyRow SnapFlingBehavior का भी समर्थन करता है — तेज़ स्क्रॉलिंग के लिए व्यवहार जो तत्वों के बीच नहीं बल्कि निकटतम तत्व पर रुकता है। यह कैरोसेल और गैलरी के लिए एक स्नैप प्रभाव पैदा करता है।

@Composable
fun CarouselWithSnap() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()
    val items = listOf("A", "B", "C", "D", "E")

    Column {
        LazyRow(
            state = listState,
            flingBehavior = SnapFlingBehavior(listState),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Card(modifier = Modifier.width(150.dp)) {
                    Text(text = item, modifier = Modifier.padding(16.dp))
                }
            }
        }

        Row(modifier = Modifier.fillMaxWidth()) {
            Button(onClick = {
                scope.launch {
                    listState.animateScrollToItem(0)
                }
            }) { Text("शुरू करने के लिए") }
        }
    }
}

इंटरफ़ेस में LazyRow के उपयोग के उदाहरण

पहला उदाहरण — पूर्वावलोकन के साथ इमेज गैलरी के लिए LazyRow। प्रत्येक तत्व एक Box है जिसमें एक छवि और कैप्शन है। LazyRow दर्जनों और सैकड़ों छवियों को कुशलतापूर्वक संभालता है, केवल दृश्यमान छवियों को लोड करता है।

@Composable
fun ImageGallery(images: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(images, key = { it }) { url ->
            AsyncImage(
                model = url,
                contentDescription = "Image",
                modifier = Modifier.size(120.dp)
            )
        }
    }
}

दूसरा उदाहरण — आइकन के साथ श्रेणी सूची के लिए LazyRow। श्रेणियाँ चिप्स के रूप में प्रदर्शित होती हैं और उपयोगकर्ता उन्हें क्षैतिज रूप से स्क्रॉल कर सकता है। spacedBy और contentPadding के साथ LazyRow श्रेणियों के बीच और किनारों पर स्पेसिंग बनाता है।

@Composable
fun CategoryChips(categories: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(categories, key = { it }) { category ->
            AssistChip(
                onClick = {},
                label = { Text(category) }
            )
        }
    }
}

LazyRow बनाम Row: कब क्या चुनें

LazyRow और Row के बीच चुनाव तत्वों की संख्या पर निर्भर करता है। Row 5–10 तत्वों के लिए उपयुक्त है जो हमेशा स्क्रीन पर दिखाई देते हैं। LazyRow तब आवश्यक है जब कई तत्व हों या उनकी संख्या गतिशील हो।

Row सभी तत्वों को एक साथ रेंडर करता है, जिससे बड़ी संख्या में तत्वों पर देरी होती है। LazyRow केवल दृश्यमान तत्वों को रेंडर करता है, जो इसे स्क्रॉल करने योग्य सूचियों के लिए बेहतर बनाता है। Android Developers Blog, 2024 के अनुसार, संक्रमण सीमा लगभग 10 तत्व है: यदि अधिक तत्व हैं, तो LazyRow का उपयोग करें।

LazyRow एनिमेशन, SnapFlingBehavior और विभाजकों के माध्यम से समूहीकरण का भी समर्थन करता है, जो इसे जटिल इंटरफ़ेस के लिए अधिक लचीला बनाता है। Row सरल है और LazyListState की आवश्यकता नहीं है, लेकिन लंबी सूचियों के लिए अनुकूलित नहीं है।

• Row — बिना स्क्रॉल के 5–10 स्थिर तत्वों के लिए
• LazyRow — क्षैतिज स्क्रॉलिंग के साथ 10+ तत्वों के लिए
• LazyRow — कैरोसेल, गैलरी, गतिशील सूचियों के लिए