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

Apa itu LazyColumn di Jetpack Compose

LazyColumn adalah fungsi composable yang mengimplementasikan daftar vertikal yang dapat digulir dengan pemuatan malas. Tidak seperti Column yang merender semua elemen turunan sekaligus, LazyColumn hanya membuat elemen yang masuk ke area tampilan.

Mekanisme pemuatan malas di LazyColumn didasarkan pada penggunaan kembali elemen: ketika elemen menjadi tersembunyi saat digulir, komposisi dan tata letaknya dapat digunakan kembali untuk elemen baru yang ditampilkan. Ini menghemat memori dan waktu prosesor, terutama pada daftar panjang.

Menurut Android Developers Blog, 2024, LazyColumn dapat memproses daftar puluhan ribu elemen secara efisien tanpa penurunan kinerja yang signifikan. Setiap elemen di LazyColumn memiliki kunci (key) yang membantu Compose mengidentifikasi dan mempertahankan status elemen saat terjadi perubahan daftar.

Tanda tangan dasar LazyColumn

LazyColumn menerima parameter modifier, state, contentPadding, reverseLayout, verticalArrangement dan horizontalAlignment. Konten ditentukan dalam blok lambda melalui fungsi DSL items dan item.

@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 = "Item $item")
        }
    }
}

Parameter LazyColumn: items dan item

Blok DSL LazyColumn menyediakan fungsi items dan item untuk menambahkan konten. items menerima koleksi data, kunci dan fungsi pabrik untuk membuat elemen. item menambahkan satu elemen statis ke daftar.

itemsIndexed adalah varian items yang meneruskan indeks elemen selain data. Ini berguna ketika posisi elemen diperlukan tanpa perhitungan terpisah. items(size) hanya menerima jumlah elemen dan pabrik tanpa keterkaitan dengan koleksi.

Parameter key di items mengidentifikasi setiap elemen secara unik. Menurut Material Design Guidelines, 2025, kunci meningkatkan kinerja saat memperbarui dan menganimasi elemen, karena Compose dapat melacak perpindahan atau perubahan elemen tertentu melalui kunci.

Contoh dengan berbagai tipe elemen

Fungsi items dengan contentType memungkinkan LazyColumn mengoptimalkan penggunaan kembali elemen dari berbagai tipe. Dalam contoh di bawah, dalam satu daftar digunakan judul bagian dan baris biasa.

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

LazyListState dan kontrol gulir

LazyListState adalah objek status LazyColumn yang melacak posisi gulir saat ini, elemen terlihat pertama dan offset. Ini dapat dibuat melalui rememberLazyListState() dan diteruskan ke parameter state LazyColumn.

LazyListState menyediakan metode animateScrollToItem dan scrollToItem untuk menggulir secara terprogram ke elemen tertentu. animateScrollToItem membuat animasi gulir yang halus, sedangkan scrollToItem menggulir secara instan. Kedua metode memerlukan pemanggilan di dalam coroutine dalam CompositionContext.

Menurut Android Developers, 2024, LazyListState juga berisi layoutInfo, yang memberikan informasi tentang elemen yang terlihat — indeks, offset, dan ukurannya. Ini berguna untuk mengimplementasikan analitik, pelacakan tampilan, atau gulir tak terbatas.

Contoh dengan gulir terprogram

Dalam contoh ini LazyColumn dikelola melalui LazyListState. Tombol menggulir daftar ke elemen dengan indeks 50 dengan animasi halus.

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

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("Gulir ke 50")
        }

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

Optimalisasi kinerja LazyColumn

Faktor kunci kinerja LazyColumn adalah penggunaan kunci yang benar. Setiap elemen harus memiliki kunci stabil unik melalui parameter key. Tanpa kunci, Compose tidak dapat menggunakan kembali elemen dengan benar saat data berubah, yang menyebabkan rekomposisi.

contentType memberi tahu LazyColumn elemen mana yang memiliki tipe tata letak yang sama. Ketika dua elemen dengan contentType yang sama masuk ke area pemrosesan, LazyColumn dapat menggunakan kembali tata letaknya tanpa rekomposisi. Menurut Android Developers Blog, 2024, contentType meningkatkan kinerja sebesar 30–50% di daftar dengan berbagai tipe elemen.

Untuk LazyColumn juga penting untuk menghindari parameter tidak stabil di fungsi pabrik. Setiap kali parameter elemen berubah, Compose merekomposisi elemen tersebut. Menggunakan remember dan derivedStateOf untuk nilai stabil mengurangi jumlah rekomposisi.

Tabel faktor kinerja

Sticky headers dan bagian di LazyColumn

stickyHeader adalah fungsi DSL LazyColumn yang menempelkan judul bagian di bagian atas daftar saat digulir. Ketika bagian berikutnya mencapai bagian atas, judulnya menggantikan yang saat ini. Perilaku ini familiar bagi pengguna dari daftar kontak dan kalender.

stickyHeader menerima kunci dan fungsi pabrik, mirip dengan item. Tidak seperti item biasa, stickyHeader tetap terlihat saat konten bagiannya digulir. Ketika bagian sepenuhnya digulir, judul bagian berikutnya mendorong yang sebelumnya.

Menurut Material Design Guidelines, 2025, sticky header meningkatkan navigasi di daftar panjang dan mengurangi beban kognitif pengguna. Untuk mengimplementasikan sticky header, cukup bungkus judul bagian dalam stickyHeader pada posisi yang benar relatif terhadap elemen items.

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