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 قبول کرتا ہے۔ مواد LazyColumn کی طرح DSL فنکشنز items اور item کے ذریعے بیان کیا جاتا ہے۔

@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 — کیروسلز، گیلریوں، متغیر فہرستوں کے لیے