LazyColumn — یہ کیا ہے، Compose میں موثر فہرستیں

Jetpack Compose میں LazyColumn کیا ہے؟

LazyColumn Foundation Compose لائبریری کا ایک composable فنکشن ہے جو سست لوڈنگ کے ساتھ عناصر کی عمودی فہرست دکھاتا ہے: صرف اسکرین پر دکھائی دینے والے یا قریبی عناصر (prefetch زون) بنائے اور مرتب کیے جاتے ہیں۔ LazyColumn Compose 1.0 (2021) میں LazyRow (افقی فہرست) اور LazyVerticalGrid (گرڈ) کے ساتھ ظاہر ہوا۔

سست لوڈنگ SubcomposeLayout میکانزم کے ذریعے کام کرتی ہے: LazyColumn دستیاب جگہ کی پیمائش کرتا ہے، LayoutInfo سے دکھائی دینے والی رینج کی درخواست کرتا ہے، اور صرف اس رینج میں عناصر کو مرتب کرتا ہے۔ اسکرین سے باہر جانے والے عناصر ترکیب چھوڑ دیتے ہیں (prefetch بفر کے علاوہ)۔ Google (Android Performance، 2026) کے مطابق، LazyColumn درمیانی درجے کے آلات پر 10000+ عناصر کی فہرست میں اسکرول کرتے ہوئے 60 FPS برقرار رکھتا ہے۔

Column + ScrollState سے فرق

Column عمودی اسکرول کے ساتھ — verticalScroll موڈیفائر کے ساتھ تمام عناصر کی ایک دوسرے کے نیچے عام ترتیب ہے۔ Column سست نہیں ہے: تمام ذیلی عناصر فوری طور پر مرتب کیے جاتے ہیں، چاہے وہ دکھائی نہ دیں۔ 200+ عناصر کی فہرست کے لیے، Column شروع ہونے میں نمایاں تاخیر کا سبب بنتا ہے۔ LazyColumn صرف دکھائی دینے والے عناصر + بفر (بطور ڈیفالٹ 1 اسکرین آگے/پیچھے) مرتب کرتا ہے، جو اسے لمبی فہرستوں کے لیے ناگزیر بناتا ہے۔

items API: فہرست میں ڈیٹا بائنڈنگ

items API LazyColumn کے لیے توسیعی فنکشنز کا ایک سیٹ ہے جو ڈیٹا کی فہرست اور ہر عنصر کے لیے DSL وضاحت کنندہ قبول کرتا ہے۔ اہم فنکشنز یہ ہیں: مقررہ تعداد کے لیے items(count, key, itemContent)، فہرست کے لیے items(list, key, itemContent)، انڈیکس کے ساتھ itemsIndexed(list, key, itemContent)۔ key پیرامیٹر کارکردگی کے لیے لازمی ہے — یہ Compose کو ایک مستحکم عنصر شناخت کنندہ دیتا ہے۔

// itemContent کے ساتھ بنیادی LazyColumn
@Composable
fun ArticleList(articles: List<Article>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        // Header — سست نہیں، ہمیشہ شروع میں
        item {
            Text("تازہ ترین مضامین", style = MaterialTheme.typography.headlineMedium)
        }

        // id کے مطابق کلید کے ساتھ مضامین کی فہرست
        items(articles, key = { it.id }) { article ->
            ArticleCard(
                title = article.title,
                summary = article.summary,
                onClick = { onArticleClick(article.id) }
            )
        }

        // لوڈنگ انڈیکیٹر کے ساتھ Footer
        item {
            CircularProgressIndicator(
                modifier = Modifier.fillMaxWidth().padding(16.dp)
            )
        }
    }
}

// اپنی مرضی کا فہرست عنصر
@Composable
fun ArticleCard(title: String, summary: String, onClick: () -> Unit) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
    ) {
        Column(modifier = Modifier.padding(12.dp)) {
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = summary, style = MaterialTheme.typography.bodyMedium)
        }
    }
}

item {} بمقابلہ items(): واحد عناصر کے لیے item {} استعمال کریں جو فہرست میں ہمیشہ موجود ہوتے ہیں (ہیڈر، فوٹر، جدا کرنے والے)۔ متحرک ڈیٹا فہرست کے لیے items() استعمال کریں۔ items() ایک Iterable یا Int اور ایک DSL بلاک قبول کرتا ہے جو ہر عنصر کے لیے بلایا جاتا ہے۔ ایک LazyColumn میں item اور items کو یکجا کریں: کالوں کی ترتیب ڈسپلے ترتیب کا تعین کرتی ہے۔

LazyListState: اسکرول پوزیشن کا انتظام

LazyListState ایک آبجیکٹ ہے جو فہرست کی حالت ذخیرہ کرتا ہے: موجودہ اسکرول پوزیشن (firstVisibleItemIndex، firstVisibleItemScrollOffset)، دکھائی دینے والے عناصر (layoutInfo)، اور پروگراماتی اسکرولنگ کے طریقے (scrollToItem، animateScrollToItem)۔ LazyListState rememberLazyListState() کے ذریعے بنایا جاتا ہے اور state پیرامیٹر کے ذریعے LazyColumn کو بھیجا جاتا ہے۔

// اسکرول پوزیشن برقرار رکھنے والا LazyColumn
@Composable
fun ScrollingList(items: List<Item>) {
    val listState = rememberLazyListState()

    Box(modifier = Modifier.fillMaxSize()) {
        LazyColumn(state = listState) {
            items(items, key = { it.id }) { item ->
                ListItemView(item = item)
            }
        }

        // "اوپر" بٹن 10ویں عنصر کے بعد ظاہر ہوتا ہے
        val showButton by remember {
            derivedStateOf { listState.firstVisibleItemIndex > 10 }
        }

        AnimatedVisibility(visible = showButton) {
            FloatingActionButton(
                modifier = Modifier
                    .align(Alignment.BottomEnd)
                    .padding(16.dp),
                onClick = {
                    coroutineScope.launch {
                        listState.animateScrollToItem(0)
                    }
                }
            ) {
                Icon(Icons.Default.KeyboardArrowUp, "اوپر جائیں")
            }
        }
    }
}

// دکھائی دینے والے عناصر کی معلومات حاصل کرنا
@Composable
fun ListDebugInfo(listState: LazyListState) {
    val visibleItems = listState.layoutInfo.visibleItemsInfo
    val totalItems = listState.layoutInfo.totalItemsCount
    val firstItem = visibleItems.firstOrNull()?.index
    val lastItem = visibleItems.lastOrNull()?.index

    Text("$totalItems میں سے $firstItem–$lastItem دکھا رہا ہے")
}

پروگراماتی اسکرولنگ listState کے suspend فنکشنز کے ذریعے کی جاتی ہے: scrollToItem(index, scrollOffset) — فوری حرکت (بغیر اینیمیشن)، animateScrollToItem(index) — اینیمیشن کے ساتھ۔ coroutine سے اسکرول کرنے کے لیے، LaunchedEffect یا coroutineScope.launch استعمال کریں۔ اہم: ترکیب کے اندر (@Composable کے اندر) suspend فنکشنز کو کال نہ کریں — لیمبڈا (onClick، LaunchedEffect) استعمال کریں۔

LazyColumn بمقابلہ RecyclerView: طریقوں کا موازنہ

LazyColumn اور RecyclerView ایک ہی مسئلہ حل کرتے ہیں — لمبی فہرستوں کی موثر ڈسپلے۔ فرق فن تعمیر میں ہے: RecyclerView ViewHolder اور Adapter (کلاسک Android View) استعمال کرتا ہے، LazyColumn XML یا ViewHolder کے بغیر اعلانیہ composable فنکشنز استعمال کرتا ہے۔ انتخاب پروجیکٹ کے ٹیکنالوجی اسٹیک پر منحصر ہے: Compose بمقابلہ View پر مبنی UI۔

Google کی تجویز (Android Developers، 2026): Jetpack Compose پر نئے پروجیکٹس کے لیے LazyColumn استعمال کریں۔ View پر مبنی پروجیکٹس کے لیے RecyclerView استعمال کریں۔ LazyColumn کو Compose کی ضرورت ہے، جو APK میں تقریباً 3–5 MB کا اضافہ کرتا ہے — پرانے آلات کی حمایت کرتے وقت اس پر غور کریں۔ اگر کوئی پروجیکٹ پہلے سے View سسٹم استعمال کرتا ہے، تو LazyColumn AndroidView کے بغیر ایک اسکرین میں XML لی آؤٹ کے ساتھ共存 نہیں کر سکتا — ایسی صورتوں میں، RecyclerView کے ساتھ رہنا آسان ہے۔

LazyVerticalGrid اور LazyHorizontalGrid: گرڈ

LazyVerticalGrid مقررہ کالم والے گرڈ کے لیے LazyColumn کا ایک ورژن ہے۔ LazyHorizontalGrid مقررہ قطاروں والا ایک افقی گرڈ ہے۔ دونوں اجزاء LazyColumn جیسے ہی سست لوڈنگ کے اصول اور ایک ہی items API استعمال کرتے ہیں۔ columns پیرامیٹر GridCells.Fixed(N) یا GridCells.Adaptive(minSize) کے ذریعے کالموں کی تعداد کا تعین کرتا ہے۔

// مطابقت پذیر کالموں والا گرڈ
@Composable
fun PhotoGrid(photos: List<Photo>) {
    LazyVerticalGrid(
        columns = GridCells.Adaptive(minSize = 128.dp),
        contentPadding = PaddingValues(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(photos, key = { it.id }) { photo ->
            AsyncImage(
                model = photo.url,
                contentDescription = photo.title,
                modifier = Modifier.aspectRatio(1f)
            )
        }
    }
}

// افقی فہرست (LazyRow)
@Composable
fun CategoryCarousel(categories: List<Category>) {
    LazyRow(
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(categories, key = { it.id }) { category ->
            FilterChip(
                selected = category.isSelected,
                onClick = { onCategoryClick(category.id) },
                label = { Text(category.name) }
            )
        }
    }
}

GridCells.Adaptive کم سے کم سیل سائز کی بنیاد پر خود بخود کالموں کی تعداد کا حساب لگاتا ہے۔ مثال کے طور پر، GridCells.Adaptive(128.dp) 360 dp چوڑی اسکرین پر 2 کالم رکھتا ہے، 600 dp ٹیبلیٹ پر — 4 کالم۔ GridCells.Fixed(2) ہمیشہ بالکل 2 کالم دکھاتا ہے۔ Adaptive ملٹی اسکرین موافقت کے لیے ترجیح دی جاتی ہے — یہ میڈیا کوریز کے بغیر خود بخود اسکرین کی چوڑائی میں ایڈجسٹ ہو جاتا ہے۔

LazyColumn کی کارکردگی: key، contentType، prefetch

LazyColumn کی کارکردگی تین عوامل پر منحصر ہے: کلید استحکام (key)، مواد کی قسم (contentType)، اور prefetch بفر (beyondBounds)۔ بطور ڈیفالٹ، LazyColumn 1 اسکرین آگے اور 1 پیچھے بفر کرتا ہے۔ Google (Android Developers، 2026) مختلف عناصر کی اقسام یا پیچیدہ ترکیب والی فہرستوں کے لیے ان پیرامیٹرز کو ترتیب دینے کی تجویز کرتا ہے۔

// contentType اور prefetch کے ساتھ بهینہ ترین LazyColumn
@Composable
fun OptimizedFeed(items: List<FeedItem>) {
    val listState = rememberLazyListState()

    LazyColumn(
        state = listState,
        modifier = Modifier.fillMaxSize(),
        beyondBoundsPageCount = 2  // 2 اسکرینوں کا prefetch
    ) {
        items(
            items = items,
            key = { it.id },
            contentType = { it.type }  // قسم کے مطابق تقسیم
        ) { item ->
            when (item) {
                is FeedItem.Post -> PostView(item)
                is FeedItem.Ad -> AdView(item)
                is FeedItem.Suggested -> SuggestedView(item)
            }
        }
    }
}

// listState کے ذریعے کارکردگی کی پیمائش
@Composable
fun ScrollPerformance(listState: LazyListState) {
    val scrollInfo = listState.layoutInfo
    val visibleCount = scrollInfo.visibleItemsInfo.size
    val total = scrollInfo.totalItemsCount

    // derivedStateOf — اگر قدر تبدیل نہیں ہوئی تو دوبارہ مرتب نہیں ہوتا
    val scrollProgress by remember {
        derivedStateOf {
            if (total > 0) visibleCount.toFloat() / total else 0f
        }
    }

    LinearProgressIndicator(
        progress = scrollProgress,
        modifier = Modifier.fillMaxWidth().height(2.dp)
    )
}

عام غلطیاں: (1) کلید کی کمی — عناصر کسی بھی فہرست تبدیلی پر دوبارہ مرتب ہوتے ہیں؛ (2) اسنیپ شاٹ فلو کے بغیر mutableStateListOf کا استعمال — تبدیلیاں ٹریک نہیں ہو سکتیں؛ (3) itemContent کے اندر suspend فنکشنز کو کال کرنا — ترکیب میں رکاوٹ ڈالتا ہے؛ (4) مخلوط اقسام کے لیے contentType نہ ہونا — Compose ٹیکسٹ پوسٹس کے لیے اشتہار کی ترکیب دوبارہ استعمال کرتا ہے جس سے بصری نمونے پیدا ہوتے ہیں۔ IT Sectr میں ہم تین یا زیادہ مواد کی اقسام والی تمام فہرستوں میں contentType شامل کرتے ہیں۔