Jetpack Compose'ta LazyRow — nedir, özellikleri ve nasıl çalışır

Jetpack Compose'ta LazyRow Nedir

LazyRow — öğelerin yavaş yüklenmesiyle yatay kaydırılabilir bir liste uygulayan composable bir fonksiyondur. Tüm alt öğeleri aynı anda oluşturan Row'un aksine, LazyRow yalnızca görünüm alanında görünen öğeleri oluşturur.

LazyRow, LazyColumn ile aynı prensipte çalışır ancak öğeleri yatay olarak düzenler. Sola veya sağa kaydırıldığında, görünüm alanından çıkan öğeler yenilerini görüntülemek için yeniden kullanılır. Bu, çok sayıda resim içeren galeriler veya uzun kategori listeleri için kritik öneme sahiptir.

Android Developers Blog, 2024'e göre LazyRow, LazyColumn ile aynı LazyList mimarisini kullanır: LazyListState, Pool aracılığıyla yeniden kullanım mekanizması ve farklı öğe türleri desteği dahil. Maksimum verimlilik, sabit öğe yüksekliği ile elde edilir.

LazyRow Temel İmzası

LazyRow, modifier, state, contentPadding, reverseLayout, horizontalArrangement ve verticalAlignment parametrelerini kabul eder. İçerik, LazyColumn'a benzer şekilde DSL fonksiyonları items ve item ile tanımlanır.

@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 Özellikleri: horizontalArrangement ve contentPadding

horizontalArrangement, LazyRow içinde yatay eksen boyunca öğelerin dağılımını yönetir. Row'da olduğu gibi aynı Arrangement değerleri mevcuttur: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround ve özel boşluklu spacedBy.

contentPadding, LazyRow konteynerinin kenarlarına dolgu ekler. Modifier.padding'ın aksine, contentPadding kaydırma sırasında dikkate alınır: ilk öğe sol kenardan, son öğe sağ kenardan dolguya sahip olur. Material Design Guidelines, 2025'e göre, karuseller ve galeriler için contentPadding zorunludur, böylece ilk ve son öğe ekran kenarına yapışmaz.

verticalAlignment, LazyRow içinde öğeleri dikey olarak hizalar. Varsayılan olarak Alignment.Top kullanılır. Farklı yükseklikteki öğeleri ortalamak için Alignment.CenterVertically kullanın, bu farklı en-boy oranlarına sahip resimler içeren karuseller için kullanışlıdır.

LazyRow Parametre Tablosu

LazyListState ile Yatay Kaydırma Yönetimi

LazyListState, LazyRow için LazyColumn ile aynı şekilde çalışır: ilk görünür öğeyi, ofseti ve genel kaydırma konumunu izler. Durum, rememberLazyListState() aracılığıyla oluşturulur ve state parametresine iletilir.

LazyRow'un programatik kaydırma kontrolü aynı yöntemlerle yapılır: yumuşak animasyon için animateScrollToItem ve anlık kaydırma için scrollToItem. Her ikisi de bir coroutine içinde çağrılır. Bu, ileri/geri düğmeleri olan karuseller veya otomatik kaydırma için kullanışlıdır.

Android Developers, 2024'e göre LazyRow ayrıca SnapFlingBehavior'u da destekler — öğeler arasında değil, en yakın öğede duran hızlı kaydırma davranışı. Bu, karuseller ve galeriler için tanıdık bir yapışma efekti oluşturur.

@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şlamak için") }
        }
    }
}

Arayüzlerde LazyRow Kullanım Örnekleri

İlk örnek — önizlemeli resim galerisi için LazyRow. Her öğe, bir resim ve altyazı içeren bir Box'tır. LazyRow, onlarca ve yüzlerce resmi verimli bir şekilde işler, yalnızca görünür olanları yükler.

@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 örnek — simgeli kategori listesi için LazyRow. Kategoriler çip olarak görüntülenir ve kullanıcı bunları yatay olarak kaydırabilir. spacedBy ve contentPadding ile LazyRow, kategoriler arasında ve kenarlarda boşluk oluşturur.

@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: Ne Zaman Hangisini Seçmeli

LazyRow ve Row arasındaki seçim öğe sayısına bağlıdır. Row, ekranda her zaman görünen 5–10 öğe için uygundur. LazyRow, çok sayıda öğe olduğunda veya sayıları dinamik olduğunda gereklidir.

Row tüm öğeleri aynı anda oluşturur ve çok sayıda öğe olduğunda gecikmelere neden olur. LazyRow yalnızca görünür öğeleri oluşturur, bu da onu kaydırılabilir listeler için tercih edilir kılar. Android Developers Blog, 2024'e göre eşik yaklaşık 10 öğedir: daha fazla öğe varsa LazyRow kullanın.

LazyRow ayrıca animasyonları, SnapFlingBehavior'u ve ayırıcılar aracılığıyla gruplamayı destekler, bu da onu karmaşık arayüzler için daha esnek kılar. Row daha basittir ve LazyListState gerektirmez, ancak uzun listeler için optimize edilmemiştir.

• Row — kaydırmasız 5–10 statik öğe için
• LazyRow — yatay kaydırmalı 10+ öğe için
• LazyRow — karuseller, galeriler, dinamik listeler için