Jetpack Compose - LazyRow

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

LazyRow adalah komponen tata letak dalam toolkit UI Jetpack Compose yang digunakan untuk menampilkan daftar item secara horizontal dengan cara yang efisien secara memori. LazyRow akan hanya memuat dan me-render item-item yang terlihat pada layar, sehingga cocok digunakan untuk menampilkan daftar yang panjang atau tak terbatas secara horizontal tanpa membebani kinerja aplikasi.

Anda sebaiknya menggunakan LazyRow ketika:

1. Menampilkan Daftar Horizontal: Jika Anda perlu menampilkan daftar item secara horizontal, seperti daftar thumbnail gambar atau daftar kategori dalam aplikasi, LazyRow adalah pilihan yang tepat karena memungkinkan penggunaan memori yang efisien.

2. Menghindari Overhead Memori: Jika Anda ingin menghindari overhead memori yang terkait dengan memuat semua item dalam daftar ke dalam memori pada saat yang sama, LazyRow akan memuat dan me-render item-item secara dinamis sesuai dengan kebutuhan, sehingga mengoptimalkan penggunaan memori aplikasi.

3. Meningkatkan Kinerja Render: Jika Anda ingin meningkatkan kinerja render dalam menampilkan daftar item secara horizontal, terutama pada daftar yang panjang, LazyRow akan hanya merender item yang terlihat pada layar, sehingga mengurangi beban render pada UI thread.

Perbedaan antara LazyRow dan LazyColumn adalah:

• Orientasi: LazyRow menampilkan daftar item secara horizontal, sementara LazyColumn menampilkannya secara vertikal.
• Penataan Konten: Item-item dalam LazyRow akan diatur secara horizontal, sedangkan dalam LazyColumn akan diatur secara vertikal.

Contoh penggunaan LazyRow adalah untuk menampilkan daftar thumbnail gambar dalam aplikasi galeri, daftar kategori produk dalam aplikasi e-commerce, atau daftar pilihan menu dalam aplikasi pemesanan makanan. Dalam kasus-kasus ini, LazyRow akan membantu mengoptimalkan kinerja aplikasi dan meningkatkan pengalaman pengguna.

Parameter/Atribut

@Composable
fun LazyRow(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    horizontalArrangement: Arrangement.Horizontal =
        if (!reverseLayout) Arrangement.Start else Arrangement.End,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: LazyListScope.() -> Unit
)

modifier: Modifier = Modifier

• Modifier untuk menyesuaikan tampilan dan perilaku dari LazyRow. Dengan menggunakan modifier, Anda dapat mengontrol hal-hal seperti padding, margin, warna latar belakang, dan tata letak dari LazyRow.

state: LazyListState = rememberLazyListState()

• State yang menyimpan informasi tentang tata letak dan status gulir dari LazyRow. LazyListState menyediakan fungsi-fungsi untuk mengontrol tata letak dan posisi saat gulir.

contentPadding: PaddingValues = PaddingValues(0.dp)

• Padding yang akan diterapkan pada konten dalam LazyRow. Anda dapat menggunakan PaddingValues untuk menambahkan padding di sekitar konten dalam LazyRow.

reverseLayout: Boolean = false

• Menentukan apakah tata letak dari LazyRow akan diatur secara terbalik atau tidak. Jika diatur ke true, item-item akan diatur dari kanan ke kiri.

horizontalArrangement: Arrangement.Horizontal = if (!reverseLayout) Arrangement.Start else Arrangement.End

• Penataan horizontal untuk item-item dalam LazyRow. Ini menentukan cara item-item akan diatur secara horizontal, seperti di kiri, di tengah, atau di kanan.

verticalAlignment: Alignment.Vertical = Alignment.Top

• Penataan vertikal untuk item-item dalam LazyRow. Ini menentukan cara item-item akan diatur secara vertikal, seperti di atas, di tengah, atau di bawah.

flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior()

• Perilaku saat melakukan gerakan geser cepat (fling) dalam LazyRow. FlingBehavior menentukan bagaimana LazyRow akan merespons saat pengguna melakukan gerakan geser cepat.

userScrollEnabled: Boolean = true

• Menentukan apakah pengguna diizinkan untuk melakukan gulir pada LazyRow atau tidak. Jika diatur ke false, pengguna tidak dapat menggulirkan konten dalam LazyRow.

content: LazyListScope.() -> Unit

• Lambda untuk mendefinisikan isi dari LazyRow. Ini memungkinkan Anda untuk menambahkan item-item ke dalam LazyRow menggunakan fungsi-fungsi pembantu yang disediakan oleh LazyListScope, seperti item, items, dan lainnya.

Contoh

@Composable
fun DemoLazyRow() {
    LazyRow(content = {
        items(100) { index ->
            Text("Item: $index")
        }
    })
}

✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video