Jetpack Compose میں LazyColumn — یہ کیا ہے، خصوصیات اور کیسے کام کرتا ہے

Jetpack Compose میں LazyColumn کیا ہے

LazyColumn ایک composable فنکشن ہے جو سست لوڈنگ کے ساتھ ایک عمودی اسکرول قابل فہرست کو نافذ کرتا ہے۔ Column کے برعکس جو تمام ذیلی عناصر کو ایک ساتھ رینڈر کرتا ہے، LazyColumn صرف وہ عناصر بناتا ہے جو ویو پورٹ کے اندر آتے ہیں۔

LazyColumn میں سست لوڈنگ کا طریقہ کار عناصر کے دوبارہ استعمال پر مبنی ہے: جب اسکرول کرتے وقت کوئی عنصر چھپ جاتا ہے، تو اس کی ترکیب اور ترتیب کو نئے ظاہر ہونے والے عنصر کے لیے دوبارہ استعمال کیا جا سکتا ہے۔ یہ میموری اور 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 کو بتاتا ہے کہ کن عناصر کا ایک جیسا لے آؤٹ ہے۔ جب ایک ہی contentType والے دو عناصر ری سائیکلنگ پول میں داخل ہوتے ہیں، LazyColumn دوبارہ ترکیب کے بغیر ان کے لے آؤٹ کو دوبارہ استعمال کر سکتی ہے۔ 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))
            }
        }
    }
}