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

Jetpack Compose-da LazyRow nədir

LazyRow — elementlərin tənbəl yükləməsi ilə üfüqi sürüşdürülə bilən siyahını reallaşdıran composable funksiyadır. Bütün uşaq elementləri eyni anda göstərən Row-dan fərqli olaraq, LazyRow yalnız görünüş sahəsində görünən elementləri yaradır.

LazyRow LazyColumn ilə eyni prinsiplə işləyir, lakin elementləri üfüqi şəkildə yerləşdirir. Sola və ya sağa sürüşdürərkən görünüş sahəsindən çıxan elementlər yenilərini göstərmək üçün təkrar istifadə olunur. Bu, çox sayda şəkli olan qalereyalar və ya uzun kateqoriya siyahıları üçün kritik əhəmiyyət daşıyır.

Android Developers Blog, 2024-ə görə, LazyRow LazyColumn ilə eyni LazyList arxitekturasından istifadə edir, o cümlədən LazyListState, Pool vasitəsilə təkrar istifadə mexanizmi və müxtəlif element tiplərinin dəstəyi. Maksimum effektivlik elementlərin sabit hündürlüyündən istifadə edərkən əldə edilir.

LazyRow-un əsas imzası

LazyRow modifier, state, contentPadding, reverseLayout, horizontalArrangement və verticalAlignment parametrlərini qəbul edir. Məzmun LazyColumn-ə bənzər şəkildə DSL items və item funksiyaları vasitəsilə təyin edilir.

@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 xüsusiyyətləri: horizontalArrangement və contentPadding

horizontalArrangement LazyRow daxilində elementlərin üfüqi ox boyunca paylanmasını idarə edir. Row-da olduğu kimi eyni Arrangement dəyərləri mövcuddur: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround və fərdi boşluqla spacedBy.

contentPadding LazyRow konteynerinin kənarlarında boşluq əlavə edir. Modifier.padding-dən fərqli olaraq, contentPadding sürüşdürmə zamanı nəzərə alınır: birinci element sol kənardan, sonuncu isə sağ kənardan boşluğa sahib olacaq. Material Design Guidelines, 2025-ə görə, contentPadding karusellər və qalereyalar üçün məcburidir ki, birinci və sonuncu elementlər ekranın kənarına yapışmasın.

verticalAlignment LazyRow daxilində elementləri şaquli olaraq düzləndirir. Susmaya görə Alignment.Top istifadə olunur. Müxtəlif hündürlüklü elementləri mərkəzləşdirmək üçün Alignment.CenterVertically istifadə edin, bu, müxtəlif nisbətli şəkilləri olan karusellər üçün faydalıdır.

LazyRow parametrləri cədvəli

LazyListState ilə üfüqi sürüşdürmənin idarə edilməsi

LazyListState LazyRow üçün LazyColumn ilə eyni şəkildə işləyir: ilk görünən elementi, yerdəyişməni və ümumi sürüşdürmə mövqeyini izləyir. Vəziyyət rememberLazyListState() vasitəsilə yaradılır və state parametrinə ötürülür.

LazyRow-un proqram idarəetməsi eyni metodlarla həyata keçirilir: hamar animasiya üçün animateScrollToItem və dərhal sürüşdürmə üçün scrollToItem. Hər ikisi korutin daxilində çağırılır. Bu, „Sol/Sağ" düymələri olan karusellər və ya avtomatik sürüşdürmə üçün faydalıdır.

Android Developers, 2024-ə görə, LazyRow həmçinin SnapFlingBehavior-u dəstəkləyir — kəskin sürüşdürmə zamanı elementlər arasında deyil, ən yaxın elementdə dayanan davranış. Bu, karusellər və qalereyalar üçün tanış olan elementə „yapışma" effekti yaradır.

@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("Başlamaq üçün") }
        }
    }
}

İnterfeyslərdə LazyRow istifadə nümunələri

Birinci nümunə — ön izləmə ilə şəkil qalereyası üçün LazyRow. Hər bir element şəkil və başlıq ilə Box-dan ibarətdir. LazyRow onlarla və yüzlərlə şəkli səmərəli şəkildə idarə edir, yalnız görünənləri yükləyir.

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

İkinci nümunə — işarələrlə kateqoriya siyahısı üçün LazyRow. Kateqoriyalar çip şəklində göstərilir və istifadəçi onları üfüqi şəkildə sürüşdürə bilər. spacedBy və contentPadding ilə LazyRow kateqoriyalar arasında və kənarlarda boşluq yaradır.

@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 vs Row: nə vaxt hansını seçmək

LazyRow və Row arasında seçim elementlərin sayından asılıdır. Row ekranda həmişə görünən 5–10 element üçün uyğundur. LazyRow elementlər çox olduqda və ya onların sayı dinamik olduqda məcburidir.

Row bütün elementləri bir anda göstərir, bu da çox sayda elementdə gecikmələrə səbəb olur. LazyRow yalnız görünənləri göstərir, bu da onu sürüşdürülən siyahılar üçün üstünlüklü edir. Android Developers Blog, 2024-ə görə, keçid həddi təxminən 10 elementdir: elementlər daha çoxdursa, LazyRow istifadə edin.

LazyRow həmçinin animasiyaları, SnapFlingBehavior-u və ayırıcılar vasitəsilə qruplaşdırmanı dəstəkləyir, bu da onu mürəkkəb interfeyslər üçün daha çevik edir. Row daha sadədir və LazyListState tələb etmir, lakin uzun siyahılar üçün optimallaşdırılmayıb.

• Row — sürüşdürməsiz 5–10 statik element üçün
• LazyRow — üfüqi sürüşdürmə ilə 10+ element üçün
• LazyRow — karusellər, qalereyalar, dinamik siyahılar üçün