LazyColumn — bu nədir, Compose-da effektiv siyahılar

Jetpack Compose-da LazyColumn nədir?

LazyColumn — Foundation Compose kitabxanasından olan, gecikməli (lazy) yükləmə ilə şaquli element siyahısını göstərən composable-funksiyadır: yalnız ekranda görünən və ya yaxınlıqda olan (prefetch zonası) elementlər yaradılır və kompozisiya olunur. LazyColumn Compose 1.0 (2021) ilə birlikdə LazyRow (üfüqi siyahı) və LazyVerticalGrid (şəbəkə) ilə birlikdə ortaya çıxdı.

Gecikməli yükləmə SubcomposeLayout mexanizmi vasitəsilə işləyir: LazyColumn mövcud yeri ölçür, LayoutInfo-dan görünən diapazonu tələb edir və yalnız bu diapazondakı elementləri kompozisiya edir. Ekrandan çıxan elementlər kompozisiyanı tərk edir (prefetch buferi istisna olmaqla). Google məlumatlarına görə (Android Performance, 2026), LazyColumn orta seqment cihazlarında 10000+ elementdən ibarət siyahını sürüşdürərkən 60 FPS təmin edir.

Column + ScrollState ilə fərq

Column şaquli sürüşdürmə ilə — verticalScroll modifierinin tətbiqi ilə bütün elementlərin bir-birinin altında adi yerləşdirilməsidir. Column gecikməli deyil: bütün uşaq elementlər görünməsələr belə dərhal kompozisiya olunur. 200+ elementdən ibarət siyahı üçün Column başlanğıcda əhəmiyyətli ləngiməyə səbəb olur. LazyColumn yalnız görünənləri + buferi (standart olaraq 1 ekran irəli/geri) kompozisiya edir, bu da onu uzun siyahılar üçün əvəzolunmaz edir.

items API: məlumatların siyahıya bağlanması

items API — LazyColumn üçün genişləndirmə funksiyaları dəsti, məlumat siyahısını və hər bir element üçün DSL təsvirini qəbul edir. Əsas funksiyalar: sabit say üçün items(count, key, itemContent), siyahı üçün items(list, key, itemContent), indekslə itemsIndexed(list, key, itemContent). key parametri — performans üçün məcburi şərt — Compose-a elementin sabit identifikatorunu verir.

// itemContent ilə əsas LazyColumn
@Composable
fun ArticleList(articles: List<Article>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        // Header — gecikməli deyil, həmişə başlanğıcda
        item {
            Text("Son məqalələr", style = MaterialTheme.typography.headlineMedium)
        }

        // Məqalələr siyahısı id ilə açar
        items(articles, key = { it.id }) { article ->
            ArticleCard(
                title = article.title,
                summary = article.summary,
                onClick = { onArticleClick(article.id) }
            )
        }

        // Yükləmə göstəricisi olan Footer
        item {
            CircularProgressIndicator(
                modifier = Modifier.fillMaxWidth().padding(16.dp)
            )
        }
    }
}

// Fərdi siyahı elementi
@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 {} vs items(): siyahıda həmişə mövcud olan tək elementlər (header, footer, ayırıcılar) üçün item {} istifadə edin. Dinamik məlumat siyahısı üçün items() istifadə edin. items() Iterable və ya Int və hər bir element üçün çağırılan DSL bloku qəbul edir. Bir LazyColumn-da item və items-i birləşdirin: çağırış sırası göstərilmə sırasını müəyyən edir.

LazyListState: sürüşdürmə mövqeyinin idarə edilməsi

LazyListState — siyahı vəziyyətini saxlayan obyekt: cari sürüşdürmə mövqeyi (firstVisibleItemIndex, firstVisibleItemScrollOffset), görünən elementlər (layoutInfo) və proqram sürüşdürmə metodları (scrollToItem, animateScrollToItem). LazyListState rememberLazyListState() vasitəsilə yaradılır və state parametri ilə LazyColumn-a ötürülür.

// Sürüşdürmə mövqeyini qoruyan 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)
            }
        }

        // "Yuxarı" düyməsi 10-cu elementdən sonra görünür
        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, "Yuxarı qalx")
            }
        }
    }
}

// Görünən elementlər haqqında məlumat almaq
@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("$firstItem–$lastItem cəmi $totalItems-dən göstərilir")
}

Proqram sürüşdürməsi listState-in suspend-funksiyaları vasitəsilə yerinə yetirilir: scrollToItem(index, scrollOffset) — ani hərəkət (animasiyasız), animateScrollToItem(index) — animasiya ilə. Korutindən sürüşdürmək üçün LaunchedEffect və ya coroutineScope.launch istifadə edin. Vacib: kompozisiyadan (içəridə @Composable) suspend-funksiyaları çağırmayın — lambdalardan (onClick, LaunchedEffect) istifadə edin.

LazyColumn vs RecyclerView: yanaşmaların müqayisəsi

LazyColumn və RecyclerView eyni vəzifəni həll edir — uzun siyahıların effektiv göstərilməsi. Fərq arxitekturadadır: RecyclerView ViewHolder və Adapter (klassik Android View) istifadə edir, LazyColumn — XML və ViewHolder olmadan deklarativ composable-funksiyalar. Seçim layihənin texnologiya stackindən asılıdır: Compose vs View-based UI.

Google tövsiyəsi (Android Developers, 2026): Jetpack Compose-da yeni layihələr üçün LazyColumn istifadə edin. View-based layihələr üçün RecyclerView istifadə edin. LazyColumn Compose tələb edir, bu da APK-ya təxminən 3–5 MB əlavə edir — köhnə cihazları dəstəkləyərkən bunu nəzərə alın. Əgər layihə artıq View sistemindən istifadə edirsə, LazyColumn AndroidView olmadan XML layoutu ilə eyni ekranda mövcud ola bilməz — belə hallarda RecyclerView-də qalmaq daha asandır.

LazyVerticalGrid və LazyHorizontalGrid: şəbəkələr

LazyVerticalGrid — sabit sayda sütunları (columns) olan şəbəkələr üçün LazyColumn versiyası. LazyHorizontalGrid — sabit sayda sətirləri (rows) olan üfüqi şəbəkə. Hər iki komponent LazyColumn ilə eyni gecikməli yükləmə prinsiplərindən və eyni items API-dən istifadə edir. columns parametri GridCells.Fixed(N) və ya GridCells.Adaptive(minSize) vasitəsilə sütunların sayını təyin edir.

// Adaptiv sütunlarla şəbəkə
@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)
            )
        }
    }
}

// Üfüqi siyahı (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 hüceyrənin minimum ölçüsünə əsasən sütunların sayını avtomatik hesablayır. Məsələn, GridCells.Adaptive(128.dp) 360 dp enində ekranda 2 sütun, 600 dp planşetdə 4 sütun yerləşdirir. GridCells.Fixed(2) həmişə düz 2 sütun göstərir. Adaptive çoxekranlı adaptasiya üçün daha üstündür — media sorğuları olmadan ekran eninə avtomatik uyğunlaşır.

LazyColumn performansı: key, contentType, prefetch

Performans LazyColumn üç amildən asılıdır: açarların sabitliyi (key), məzmun növü (contentType) və prefetch buferi (beyondBounds). Standart olaraq LazyColumn 1 ekran irəli və 1 geri buferləyir. Google (Android Developers, 2026) bu parametrləri müxtəlif element tipləri və ya mürəkkəb kompozisiyası olan siyahılar üçün konfiqurasiya etməyi tövsiyə edir.

// contentType və prefetch ilə optimallaşdırılmış LazyColumn
@Composable
fun OptimizedFeed(items: List<FeedItem>) {
    val listState = rememberLazyListState()

    LazyColumn(
        state = listState,
        modifier = Modifier.fillMaxSize(),
        beyondBoundsPageCount = 2  // prefetch 2 ekran
    ) {
        items(
            items = items,
            key = { it.id },
            contentType = { it.type }  // növlərə görə bölmə
        ) { item ->
            when (item) {
                is FeedItem.Post -> PostView(item)
                is FeedItem.Ad -> AdView(item)
                is FeedItem.Suggested -> SuggestedView(item)
            }
        }
    }
}

// listState vasitəsilə performansın ölçülməsi
@Composable
fun ScrollPerformance(listState: LazyListState) {
    val scrollInfo = listState.layoutInfo
    val visibleCount = scrollInfo.visibleItemsInfo.size
    val total = scrollInfo.totalItemsCount

    // derivedStateOf — dəyər dəyişməyibsə yenidən tərtib etmir
    val scrollProgress by remember {
        derivedStateOf {
            if (total > 0) visibleCount.toFloat() / total else 0f
        }
    }

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

Ümumi səhvlər: (1) key-in olmaması — elementlər siyahının hər dəyişməsində yenidən kompozisiya olunur; (2) snapshot axınları olmadan mutableStateListOf istifadəsi — dəyişikliklər izlənilməyə bilər; (3) itemContent daxilində suspend-funksiyaların çağırılması — kompozisiyanı kəsir; (4) qarışıq tiplər üçün contentType olmaması — Compose mətn postu üçün reklam kompozisiyasını təkrar istifadə edir, vizual artefaktlara səbəb olur. IT Sectr-də üç və daha çox məzmun növü olan bütün siyahılara contentType əlavə edirik.