LazyColumn Jetpack Compose-da — bu nima, xususiyatlari va qanday ishlaydi

Jetpack Compose-da LazyColumn nima

LazyColumn tənbəl yüklash bilan vertikal aylantiriladigan ro'yxatni amalga oshiruvchi composable funksiyadir. Barcha bola elementlarni birdaniga render qiluvchi Column-dan farqli o'laroq, LazyColumn faqat ko'rinish maydoniga kiradigan elementlarni yaratadi.

LazyColumn-da tənbəl yüklash mexanizmi elementlarning qayta ishlatilishiga asoslangan: element aylantirish paytida yashiringanda, uning kompozitsiyasi va layouti yangi ko'rsatiladigan element uchun qayta ishlatilishi mumkin. Bu, ayniqsa, uzun ro'yxatlarda xotira va protsessor vaqtini tejaydi.

Android Developers Blog, 2024-ga ko'ra, LazyColumn o'n minglab elementlardan iborat ro'yxatlarni unumdorlikni sezilarli darajada pasaytirmasdan samarali qayta ishlay oladi. LazyColumn-dagi har bir element kalitga (key) ega bo'lib, u Compose-ga ro'yxat o'zgarishlarida elementni aniqlash va uning holatini saqlashga yordam beradi.

LazyColumn ning asosiy imzosi

LazyColumn modifier, state, contentPadding, reverseLayout, verticalArrangement va horizontalAlignment parametrlarini qabul qiladi. Tarkib lambda blokida DSL funksiyalari items va item orqali belgilanadi.

@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 parametrlari: items va item

LazyColumn-ning DSL bloki tarkib qo'shish uchun items va item funksiyalarini taqdim etadi. items ma'lumotlar to'plamini, kalitni va elementlarni yaratish uchun fabrika funksiyasini qabul qiladi. item ro'yxatga bitta statik element qo'shadi.

itemsIndexed ma'lumotlarga qo'shimcha ravishda element indeksini uzatuvchi items variantidir. Bu elementning o'rnini alohida hisoblashsiz bilish kerak bo'lganda foydalidir. items(size) faqat elementlar sonini va to'plamga bog'liq bo'lmagan fabrikani qabul qiladi.

items-dagi key parametri har bir elementni noyob tarzda identifikatsiya qiladi. Material Design Guidelines, 2025-ga ko'ra, kalitlar elementlarni yangilash va animatsiya qilishda unumdorlikni yaxshilaydi, chunki Compose kalit orqali aniq elementning siljishi yoki o'zgarishini kuzatishi mumkin.

Turli xil element turlari bilan misol

contentType bilan items funksiyasi LazyColumn-ga turli xil elementlarning qayta ishlatilishini optimallashtirish imkonini beradi. Quyidagi misolda bitta ro'yxatda bo'lim sarlavhalari va oddiy qatorlar ishlatilgan.

@Composable
fun MixedItemsList() {
    LazyColumn {
        item {
            Text(
                text = "Sarlavha",
                style = MaterialTheme.typography.headlineMedium
            )
        }
        items(
            items = (1..20).toList(),
            key = { it },
            contentType = { "item" }
        ) { item ->
            Text(text = "Qator $item")
        }
    }
}

LazyListState va aylantirishni boshqarish

LazyListState joriy aylantirish pozitsiyasini, birinchi ko'rinadigan elementni va siljishni kuzatib boruvchi LazyColumn holat obyektidir. U rememberLazyListState() orqali yaratilishi va LazyColumn-ning state parametriga uzatilishi mumkin.

LazyListState ma'lum bir elementga dasturiy aylantirish uchun animateScrollToItem va scrollToItem metodlarini taqdim etadi. animateScrollToItem silliq aylantirish animatsiyasini yaratadi, scrollToItem esa darhol aylantiradi. Ikkala metod ham CompositionContext ichidagi korutin ichida chaqirilishini talab qiladi.

Android Developers, 2024-ga ko'ra, LazyListState shuningdek ko'rinadigan elementlar haqida ma'lumot beruvchi layoutInfo-ni o'z ichiga oladi — ularning indekslari, siljishlari va o'lchamlari. Bu analitika, ko'rishlarni kuzatish yoki cheksiz aylantirishni amalga oshirish uchun foydalidir.

Dasturiy aylantirish bilan misol

Ushbu misolda LazyColumn LazyListState orqali boshqariladi. Tugma ro'yxatni silliq animatsiya bilan indeksi 50 bo'lgan elementga aylantiradi.

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

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("50-ga aylantir")
        }

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

LazyColumn unumdorligini optimallashtirish

LazyColumn unumdorligining asosiy omili kalitlardan to'g'ri foydalanishdir. Har bir element key parametri orqali noyob barqaror kalitga ega bo'lishi kerak. Kalitlarsiz Compose ma'lumot o'zgarishlarida elementlarni to'g'ri qayta ishlata olmaydi, bu esa qayta kompozitsiyaga olib keladi.

contentType LazyColumn-ga qaysi elementlar bir xil layout turiga ega ekanligini bildiradi. Bir xil contentType-ga ega ikkita element qayta ishlash maydoniga tushganda, LazyColumn qayta kompozitsiyasiz ularning layoutini qayta ishlatishi mumkin. Android Developers Blog, 2024-ga ko'ra, contentType turli xil element turlari bo'lgan ro'yxatlarda unumdorlikni 30–50% yaxshilaydi.

LazyColumn uchun fabrika funksiyalarida beqaror parametrlardan qochish ham muhimdir. Element parametri har safar o'zgarganda, Compose ushbu elementni qayta kompozitsiya qiladi. Barqaror qiymatlar uchun remember va derivedStateOf dan foydalanish qayta kompozitsiyalar sonini kamaytiradi.

Unumdorlik omillari jadvali

LazyColumn-da Sticky headers va bo'limlar

stickyHeader aylantirish paytida bo'lim sarlavhasini ro'yxatning yuqori qismida mahkamlaydigan LazyColumn DSL funksiyasidir. Keyingi bo'lim yuqoriga yetganda, uning sarlavhasi joriy sarlavhani almashtiradi. Bu xatti-harakat foydalanuvchilarga kontakt ro'yxatlari va kalendarlardan tanishdir.

stickyHeader item-ga o'xshab kalit va fabrika funksiyasini qabul qiladi. Oddiy item-dan farqli o'laroq, stickyHeader o'z bo'limining tarkibi aylantirilganda ko'rinadigan bo'lib qoladi. Bo'lim to'liq aylantirilganda, keyingi bo'limning sarlavhasi oldingisini siqib chiqaradi.

Material Design Guidelines, 2025-ga ko'ra, sticky header uzun ro'yxatlarda navigatsiyani yaxshilaydi va foydalanuvchining kognitiv yukini kamaytiradi. Sticky header-ni amalga oshirish uchun bo'lim sarlavhasini items elementlariga nisbatan to'g'ri pozitsiyada stickyHeader bilan o'rash kifoya.

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