LazyRow di Jetpack Compose — apa itu, properti dan cara kerjanya

Apa itu LazyRow di Jetpack Compose

LazyRow — adalah fungsi composable yang mengimplementasikan daftar horizontal yang dapat digulir dengan pemuatan malas elemen. Berbeda dengan Row yang merender semua elemen anak secara bersamaan, LazyRow hanya membuat elemen yang terlihat di area pandang.

LazyRow bekerja dengan prinsip yang sama seperti LazyColumn, tetapi menempatkan elemen secara horizontal. Saat menggulir ke kiri atau kanan, elemen yang telah keluar dari area pandang digunakan kembali untuk menampilkan yang baru. Ini sangat penting untuk galeri dengan banyak gambar atau daftar kategori yang panjang.

Menurut Android Developers Blog, 2024, LazyRow menggunakan arsitektur LazyList yang sama dengan LazyColumn, termasuk LazyListState, mekanisme penggunaan kembali melalui Pool, dan dukungan untuk berbagai tipe elemen. Efisiensi maksimal dicapai dengan menggunakan tinggi elemen yang tetap.

Signatur dasar LazyRow

LazyRow menerima parameter modifier, state, contentPadding, reverseLayout, horizontalArrangement dan verticalAlignment. Konten didefinisikan melalui fungsi DSL items dan item, mirip dengan LazyColumn.

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

Properti LazyRow: horizontalArrangement dan contentPadding

horizontalArrangement mengatur distribusi elemen di sepanjang sumbu horizontal di dalam LazyRow. Nilai Arrangement yang sama seperti di Row tersedia: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround dan spacedBy dengan jarak kustom.

contentPadding menambahkan bantalan di tepi wadah LazyRow. Berbeda dengan Modifier.padding, contentPadding diperhitungkan saat pengguliran: elemen pertama akan memiliki jarak dari tepi kiri, elemen terakhir dari tepi kanan. Menurut Material Design Guidelines, 2025, contentPadding wajib untuk korsel dan galeri agar elemen pertama dan terakhir tidak menempel ke tepi layar.

verticalAlignment menyelaraskan elemen secara vertikal di dalam LazyRow. Secara default Alignment.Top digunakan. Untuk memusatkan elemen dengan tinggi berbeda gunakan Alignment.CenterVertically, yang berguna untuk korsel dengan gambar rasio berbeda.

Tabel parameter LazyRow

Mengontrol pengguliran horizontal dengan LazyListState

LazyListState untuk LazyRow bekerja identik dengan LazyColumn: melacak elemen pertama yang terlihat, offset, dan posisi gulir secara keseluruhan. Status dibuat melalui rememberLazyListState() dan diteruskan ke parameter state.

Kontrol terprogram pengguliran LazyRow dilakukan dengan metode yang sama: animateScrollToItem untuk animasi halus dan scrollToItem untuk pengguliran instan. Keduanya dipanggil di dalam korutin. Ini berguna untuk korsel dengan tombol "Kiri/Kanan" atau untuk pengguliran otomatis.

Menurut Android Developers, 2024, LazyRow juga mendukung SnapFlingBehavior — perilaku saat pengguliran cepat yang berhenti pada elemen terdekat, bukan di antara elemen. Ini menciptakan efek "menempel" pada elemen, yang biasa ditemukan di korsel dan galeri.

@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("Untuk memulai") }
        }
    }
}

Contoh penggunaan LazyRow di antarmuka

Contoh pertama — LazyRow untuk galeri gambar dengan pratinjau. Setiap elemen adalah Box dengan gambar dan keterangan. LazyRow menangani puluhan dan ratusan gambar secara efisien, hanya memuat yang terlihat.

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

Contoh kedua — LazyRow untuk daftar kategori dengan ikon. Kategori ditampilkan dalam bentuk chip, dan pengguna dapat menggulirnya secara horizontal. LazyRow dengan spacedBy dan contentPadding menciptakan jarak antar kategori dan di tepi.

@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 versus Row: kapan memilih yang mana

Pilihan antara LazyRow dan Row tergantung pada jumlah elemen. Row cocok untuk 5–10 elemen yang selalu terlihat di layar. LazyRow wajib digunakan ketika elemen banyak atau jumlahnya dinamis.

Row merender semua elemen sekaligus, yang menyebabkan keterlambatan dengan jumlah elemen yang banyak. LazyRow hanya merender elemen yang terlihat, menjadikannya pilihan utama untuk daftar dengan pengguliran. Menurut Android Developers Blog, 2024, ambang transisi sekitar 10 elemen: jika lebih banyak, gunakan LazyRow.

LazyRow juga mendukung animasi, SnapFlingBehavior dan pengelompokan melalui pemisah, menjadikannya lebih fleksibel untuk antarmuka yang kompleks. Row lebih sederhana dan tidak memerlukan LazyListState, tetapi tidak dioptimalkan untuk daftar panjang.

• Row — untuk 5–10 elemen statis tanpa pengguliran
• LazyRow — untuk 10+ elemen dengan pengguliran horizontal
• LazyRow — untuk korsel, galeri, daftar dinamis