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

Jetpack Compose-da LazyRow nima

LazyRow — elementlarni dangasa yuklash bilan gorizontal aylanadigan roʻyxatni amalga oshiruvchi composable funksiyadir. Barcha bolaviy elementlarni bir vaqtda koʻrsatadigan Row-dan farqli oʻlaroq, LazyRow faqat koʻrinish maydonida koʻrinadigan elementlarni yaratadi.

LazyRow LazyColumn bilan bir xil printsipda ishlaydi, lekin elementlarni gorizontal joylashtiradi. Chapga yoki oʻngga aylantirganda, koʻrinish maydonidan chiqqan elementlar yangilarini koʻrsatish uchun qayta ishlatiladi. Bu koʻp sonli rasmlari boʻlgan galereyalar yoki uzun kategoriya roʻyxatlari uchun juda muhim.

Android Developers Blog, 2024 ga koʻra, LazyRow LazyColumn bilan bir xil LazyList arxitekturasidan foydalanadi, jumladan LazyListState, Pool orqali qayta ishlatish mexanizmi va turli element turlarini qoʻllab-quvvatlash. Maksimal samaradorlik elementlarning qattiq balandligidan foydalanganda erishiladi.

LazyRow-ning asosiy imzosi

LazyRow modifier, state, contentPadding, reverseLayout, horizontalArrangement va verticalAlignment parametrlarini qabul qiladi. Mazmun LazyColumn-ga oʻxshab DSL items va item funksiyalari orqali aniqlanadi.

@Composable
fun SimpleLazyRow() {
    val items = (1..50).toList()
    LazyRow(
        modifier = Modifier.fillMaxWidth().height(100.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp)
    ) {
        items(items) { item ->
            Box(
                modifier = Modifier.size(80.dp).background(Color.Gray)
            ) {
                Text(text = "$item", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

LazyRow xususiyatlari: horizontalArrangement va contentPadding

horizontalArrangement LazyRow ichidagi elementlarning gorizontal oʻq boʻylab taqsimlanishini boshqaradi. Row-da boʻlgani kabi bir xil Arrangement qiymatlari mavjud: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround va maxsus boʻshliq bilan spacedBy.

contentPadding LazyRow konteynerining chetlarida boʻsh joy qoʻshadi. Modifier.padding-dan farqli oʻlaroq, contentPadding aylantirishda hisobga olinadi: birinchi element chap chetidan, oxirgi esa oʻng chetidan boʻshliqqa ega boʻladi. Material Design Guidelines, 2025 ga koʻra, contentPadding karusellar va galereyalar uchun majburiydir, birinchi va oxirgi elementlar ekran chetiga yopishmasligi uchun.

verticalAlignment LazyRow ichidagi elementlarni vertikal ravishda tekislaydi. Odatiy boʻlib Alignment.Top ishlatiladi. Turli balandlikdagi elementlarni markazlashtirish uchun Alignment.CenterVertically dan foydalaning, bu turli nisbatdagi rasmlari boʻlgan karusellar uchun foydali.

LazyRow parametrlari jadvali

LazyListState bilan gorizontal aylantirishni boshqarish

LazyListState LazyRow uchun LazyColumn bilan bir xil ishlaydi: birinchi koʻrinadigan elementni, siljishni va umumiy aylantirish pozitsiyasini kuzatadi. Holat rememberLazyListState() orqali yaratiladi va state parametriga uzatiladi.

LazyRow ning dasturiy boshqaruvi bir xil usullar bilan amalga oshiriladi: silliq animatsiya uchun animateScrollToItem va darhol aylantirish uchun scrollToItem. Ikkalasi korutin ichida chaqiriladi. Bu "Chap/Oʻng" tugmalari boʻlgan karusellar yoki avtomatik aylantirish uchun foydali.

Android Developers, 2024 ga koʻra, LazyRow shuningdek SnapFlingBehavior — keskin aylantirishda elementlar orasida emas, balki eng yaqin elementda toʻxtaydigan xatti-harakatni qoʻllab-quvvatlaydi. Bu karusellar va galereyalar uchun tanish boʻlgan elementga "yopishish" effektini yaratadi.

@Composable
fun CarouselWithSnap() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()
    val items = listOf("A", "B", "C", "D", "E")

    Column {
        LazyRow(
            state = listState,
            flingBehavior = SnapFlingBehavior(listState),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Card(modifier = Modifier.width(150.dp)) {
                    Text(text = item, modifier = Modifier.padding(16.dp))
                }
            }
        }

        Row(modifier = Modifier.fillMaxWidth()) {
            Button(onClick = {
                scope.launch {
                    listState.animateScrollToItem(0)
                }
            }) { Text("Boshlash uchun") }
        }
    }
}

Interfeyslarda LazyRow ishlatish misollari

Birinchi misol — oldindan koʻrish bilan rasm galereyasi uchun LazyRow. Har bir element rasm va sarlavha bilan Box dan iborat. LazyRow oʻnlab va yuzlab rasmlarni samarali boshqaradi, faqat koʻrinadiganlarini yuklaydi.

@Composable
fun ImageGallery(images: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(images, key = { it }) { url ->
            AsyncImage(
                model = url,
                contentDescription = "Image",
                modifier = Modifier.size(120.dp)
            )
        }
    }
}

Ikkinchi misol — piktogrammalar bilan kategoriya roʻyxati uchun LazyRow. Kategoriyalar chip shaklida koʻrsatiladi va foydalanuvchi ularni gorizontal aylantirishi mumkin. spacedBy va contentPadding bilan LazyRow kategoriyalar orasida va chetlarda boʻsh joy yaratadi.

@Composable
fun CategoryChips(categories: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(categories, key = { it }) { category ->
            AssistChip(
                onClick = {},
                label = { Text(category) }
            )
        }
    }
}

LazyRow va Row: qachon qaysini tanlash

LazyRow va Row oʻrtasidagi tanlov elementlar soniga bogʻliq. Row ekranda doim koʻrinadigan 5–10 element uchun mos keladi. LazyRow elementlar koʻp boʻlganda yoki ularning soni dinamik boʻlganda majburiydir.

Row barcha elementlarni bir vaqtda koʻrsatadi, bu koʻp sonli elementlarda kechikishlarga olib keladi. LazyRow faqat koʻrinadiganlarni koʻrsatadi, bu uni aylanadigan roʻyxatlar uchun afzal qiladi. Android Developers Blog, 2024 ga koʻra, oʻtish chegarasi taxminan 10 element: agar elementlar koʻproq boʻlsa, LazyRow dan foydalaning.

LazyRow shuningdek animatsiyalar, SnapFlingBehavior va ajratgichlar orqali guruhlashni qoʻllab-quvvatlaydi, bu uni murakkab interfeyslar uchun moslashuvchan qiladi. Row soddaroq va LazyListState talab qilmaydi, lekin uzun roʻyxatlar uchun optimallashtirilmagan.

• Row — aylantirishsiz 5–10 statik element uchun
• LazyRow — gorizontal aylantirish bilan 10+ element uchun
• LazyRow — karusellar, galereyalar, dinamik roʻyxatlar uchun