LazyColumn Jetpack Compose-da — bu nədir, xüsusiyyətləri və necə işləyir

Jetpack Compose-da LazyColumn nədir

LazyColumn tənbəl yükləmə ilə şaquli sürüşdürülə bilən siyahını həyata keçirən composable funksiyadır. Bütün uşaq elementləri bir anda render edən Column-dən fərqli olaraq, LazyColumn yalnız görünüş sahəsinə daxil olan elementləri yaradır.

LazyColumn-da tənbəl yükləmə mexanizmi elementlərin təkrar istifadəsinə əsaslanır: element sürüşdürmə zamanı gizləndikdə, onun kompozisiyası və layoutu yeni göstərilən element üçün təkrar istifadə oluna bilər. Bu, xüsusilə uzun siyahılarda yaddaş və prosessor vaxtına qənaət edir.

Android Developers Blog, 2024-ə görə, LazyColumn performansda əhəmiyyətli azalma olmadan on minlərlə elementdən ibarət siyahıları effektiv şəkildə emal edə bilər. LazyColumn-dakı hər elementin açarı (key) var ki, bu da Compose-a siyahı dəyişiklikləri zamanı elementin vəziyyətini müəyyən etməyə və qorumağa kömək edir.

LazyColumn-un əsas imzası

LazyColumn modifier, state, contentPadding, reverseLayout, verticalArrangement və horizontalAlignment parametrlərini qəbul edir. Məzmun lambda blokunda DSL funksiyaları items və item vasitəsilə təyin edilir.

@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 = "Element $item")
        }
    }
}

LazyColumn parametrləri: items və item

LazyColumn-un DSL bloku məzmun əlavə etmək üçün items və item funksiyalarını təmin edir. items verilənlər kolleksiyasını, açarı və elementləri yaratmaq üçün fabrik funksiyasını qəbul edir. item siyahıya bir statik element əlavə edir.

itemsIndexed məlumatlara əlavə olaraq elementin indeksini ötürən items variantıdır. Bu, ayrıca hesablama olmadan elementin mövqeyini bilmək tələb olunduqda faydalıdır. items(size) yalnız elementlərin sayını və kolleksiyaya bağlı olmayan fabriki qəbul edir.

items-də key parametri hər bir elementi unikal şəkildə identifikasiya edir. Material Design Guidelines, 2025-ə görə, açarlar elementlərin yenilənməsi və animasiyası zamanı performansı yaxşılaşdırır, çünki Compose açar vasitəsilə konkret elementin yerdəyişməsini və ya dəyişməsini izləyə bilər.

Müxtəlif element növləri ilə nümunə

contentType ilə items funksiyası LazyColumn-a müxtəlif növ elementlərin təkrar istifadəsini optimallaşdırmağa imkan verir. Aşağıdakı nümunədə bir siyahıda bölmə başlıqları və adi sətirlər istifadə olunur.

@Composable
fun MixedItemsList() {
    LazyColumn {
        item {
            Text(
                text = "Başlıq",
                style = MaterialTheme.typography.headlineMedium
            )
        }
        items(
            items = (1..20).toList(),
            key = { it },
            contentType = { "item" }
        ) { item ->
            Text(text = "Sətir $item")
        }
    }
}

LazyListState və sürüşdürmə idarəsi

LazyListState cari sürüşdürmə mövqeyini, ilk görünən elementi və yerdəyişməni izləyən LazyColumn vəziyyət obyektidir. O, rememberLazyListState() vasitəsilə yaradıla və LazyColumn-un state parametrinə ötürülə bilər.

LazyListState müəyyən bir elementə proqramlı sürüşdürmə üçün animateScrollToItem və scrollToItem metodlarını təmin edir. animateScrollToItem hamar sürüşdürmə animasiyası yaradır, scrollToItem isə dərhal sürüşdürür. Hər iki metod CompositionContext daxilində korutin daxilində çağırılma tələb edir.

Android Developers, 2024-ə görə, LazyListState həmçinin görünən elementlər haqqında məlumat verən layoutInfo-nu ehtiva edir — onların indeksləri, yerdəyişmələri və ölçüləri. Bu, analitika, baxışların izlənməsi və ya sonsuz sürüşdürmə tətbiqi üçün faydalıdır.

Proqramlı sürüşdürmə ilə nümunə

Bu nümunədə LazyColumn LazyListState vasitəsilə idarə olunur. Düymə siyahını hamar animasiya ilə indeksi 50 olan elementə sürüşdürür.

@Composable
fun ScrollableList() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("50-yə sürüşdür")
        }

        LazyColumn(state = listState) {
            items((1..100).toList()) { item ->
                Text(
                    text = "Element $item",
                    modifier = Modifier.padding(8.dp)
                )
            }
        }
    }
}

LazyColumn performansının optimallaşdırılması

LazyColumn performansının əsas amili açarlardan düzgün istifadədir. Hər bir element key parametri vasitəsilə unikal stabil açarına malik olmalıdır. Açarlar olmadan Compose məlumat dəyişiklikləri zamanı elementləri düzgün təkrar istifadə edə bilməz, bu da yenidən kompozisiyaya səbəb olur.

contentType LazyColumn-a hansı elementlərin eyni layout növünə malik olduğunu bildirir. Eyni contentType-a malik iki element emal sahəsinə düşdükdə, LazyColumn yenidən kompozisiya olmadan onların layoutunu təkrar istifadə edə bilər. Android Developers Blog, 2024-ə görə, contentType müxtəlif element növləri olan siyahılarda performansı 30–50% yaxşılaşdırır.

LazyColumn üçün fabrik funksiyalarında qeyri-sabit parametrlərdən qaçınmaq da vacibdir. Elementin parametri hər dəfə dəyişdikdə, Compose həmin elementi yenidən kompozisiya edir. Stabil dəyərlər üçün remember və derivedStateOf istifadəsi yenidən kompozisiyaların sayını azaldır.

Performans amilləri cədvəli

LazyColumn-da Sticky headers və bölmələr

stickyHeader sürüşdürmə zamanı bölmə başlığını siyahının yuxarı hissəsində bərkidən LazyColumn DSL funksiyasıdır. Növbəti bölmə yuxarıya çatdıqda, onun başlığı cari başlığı əvəz edir. Bu davranış istifadəçilərə kontakt siyahıları və təqvimlərdən tanışdır.

stickyHeader item-ə bənzər şəkildə açar və fabrik funksiyasını qəbul edir. Adi item-dən fərqli olaraq, stickyHeader öz bölməsinin məzmunu sürüşdürüldükdə görünən qalır. Bölmə tamamilə sürüşdürüldükdə, növbəti bölmənin başlığı əvvəlkini sıxışdırır.

Material Design Guidelines, 2025-ə görə, sticky header uzun siyahılarda naviqasiyanı yaxşılaşdırır və istifadəçinin idrak yükünü azaldır. Sticky header tətbiq etmək üçün bölmə başlığını items elementlərinə nisbətən düzgün mövqedə stickyHeader ilə əhatələmək kifayətdir.

@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))
            }
        }
    }
}