Jetpack Compose - LazyVerticalGrid

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

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

Anda sebaiknya menggunakan LazyVerticalGrid ketika:

1. Menampilkan Daftar dalam Bentuk Grid: Jika Anda perlu menampilkan daftar item dalam bentuk grid, seperti galeri foto, daftar produk dengan thumbnail gambar, atau daftar kategori dalam aplikasi, LazyVerticalGrid 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, LazyVerticalGrid 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 dalam bentuk grid, terutama pada daftar yang panjang, LazyVerticalGrid akan hanya merender item yang terlihat pada layar, sehingga mengurangi beban render pada UI thread.

Perbedaan antara LazyVerticalGrid, LazyColumn, dan LazyRow adalah:

• Orientasi: LazyVerticalGrid menampilkan daftar item dalam bentuk grid secara vertikal, LazyColumn menampilkannya secara vertikal dalam satu kolom, sementara LazyRow menampilkannya secara horizontal dalam satu baris.
• Penataan Konten: Item-item dalam LazyVerticalGrid akan diatur dalam bentuk grid, sedangkan dalam LazyColumn akan diatur secara vertikal dalam satu kolom, dan dalam LazyRow akan diatur secara horizontal dalam satu baris.

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

Parameter/Atribut

@Composable
fun LazyVerticalGrid(
    columns: GridCells,
    modifier: Modifier = Modifier,
    state: LazyGridState = rememberLazyGridState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical =
        if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: LazyGridScope.() -> Unit
)

columns: GridCells

• Jumlah kolom dalam grid. Anda dapat menggunakan GridCells untuk menentukan jumlah kolom yang tetap (GridCells.Fixed) atau lebar minimum kolom (GridCells.Adaptive(minSize)). Parameter ini menentukan bagaimana item akan diatur dalam grid secara vertikal.

modifier: Modifier = Modifier

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

state: LazyGridState = rememberLazyGridState()

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

contentPadding: PaddingValues = PaddingValues(0.dp)

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

reverseLayout: Boolean = false

• Menentukan apakah tata letak dari LazyVerticalGrid akan diatur secara terbalik atau tidak. Jika diatur ke true, item-item akan diatur dari bawah ke atas.

verticalArrangement: Arrangement.Vertical = if (!reverseLayout) Arrangement.Top else Arrangement.Bottom

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

horizontalArrangement: Arrangement.Horizontal = Arrangement.Start

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

flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior()

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

userScrollEnabled: Boolean = true

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

content: LazyGridScope.() -> Unit

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

Contoh

@Composable
fun DemoLazyVerticalGrid() {
    LazyVerticalGrid(
        columns = GridCells.Fixed(3), // Jumlah kolom
        content = {
            items(100) { index -> // Mengisi grid dengan 100 item
                Text("Item: $index") // Konten setiap item
            }
        }
    )
}

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

Video