Jetpack Compose - NavigationDrawer aka ModalNavigationDrawer

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

Apa itu ModalNavigationDrawer?

ModalNavigationDrawer adalah komponen dalam Jetpack Compose yang digunakan untuk menampilkan laci navigasi (navigation drawer) secara modal di layar aplikasi. Ini memungkinkan pengguna untuk mengakses menu atau navigasi tambahan dengan menarik atau mengklik ikon menu.

Perubahan Nama

Sebelumnya dikenal sebagai NavigationDrawer, komponen ini diubah namanya menjadi ModalNavigationDrawer untuk meningkatkan konsistensi dan kejelasan dalam terminologi Jetpack Compose.

Kapan Harus Menggunakannya?

ModalNavigationDrawer harus digunakan ketika Anda memerlukan:

• Menyediakan navigasi atau menu tambahan yang dapat diakses pengguna dengan menarik atau mengklik ikon menu.
• Menyembunyikan menu atau navigasi tambahan secara modal di atas konten utama layar.

Parameter/Atribut

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ModalNavigationDrawer(
    drawerContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    gesturesEnabled: Boolean = true,
    scrimColor: Color = DrawerDefaults.scrimColor,
    content: @Composable () -> Unit
)

Parameter pada ModalNavigationDrawer di Jetpack Compose

• drawerContent: @Composable () -> Unit

  • Komponen yang menampilkan konten dari laci navigasi (drawer content).

• modifier: Modifier

  • Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari ModalNavigationDrawer.

• drawerState: DrawerState

  • State untuk mengontrol status (buka/tutup) dari laci navigasi.

• gesturesEnabled: Boolean

  • Menentukan apakah gestur untuk menutup laci navigasi diaktifkan atau tidak.

• scrimColor: Color

  • Warna scrim (layer transparan) di belakang laci navigasi.

• content: @Composable () -> Unit

  • Konten utama aplikasi yang akan ditampilkan di bawah laci navigasi.

Contoh

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DemoNavigationDrawer() {
    val currentIndex = remember {
        mutableIntStateOf(0)
    }
    val scope = rememberCoroutineScope()
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    ModalNavigationDrawer(drawerContent = {
        Column {
            Box(
                modifier = Modifier
                    .height(200.dp)
                    .fillMaxWidth()
                    .background(color = Color.Transparent)
            )
            Button(onClick = {
                scope.launch {
                    drawerState.close()
                }
            }) {
                Text("Menu 1")
            }
            Button(onClick = { /*TODO*/ }) {
                Text("Menu 2")
            }
            Button(onClick = { /*TODO*/ }) {
                Text("Menu 3")

            }
        }
    }, drawerState = drawerState) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text("The Ngoding", color = Color.White)
                    },
                    colors = TopAppBarDefaults.topAppBarColors(
                        containerColor = Color.Blue,
                    ),
                    actions = {
                        IconButton(onClick = {
                            scope.launch {
                                drawerState.open()
                            }
                        }) {
                            Icon(
                                Icons.Filled.Menu,
                                contentDescription = "Drawer",
                                tint = Color.White
                            )
                        }
                    }
                )
            },
            content = { paddingValues ->
                // Konten Utama
                // Di sini Anda bisa menambahkan komponen-komponen utama aplikasi.
                Column(modifier = Modifier.padding(paddingValues)) {
                    Text(text = "The")
                    Text(text = "Ngoding")
                }
            },
            floatingActionButton = {
                // FloatingActionButton
                // Di sini Anda bisa menambahkan FloatingActionButton dan logika aksi yang terkait.
                Text(text = "FAB")
            },
            bottomBar = {
                // Bottom Navigation
                // Di sini Anda bisa menambahkan komponen Bottom Navigation.
                NavigationBar {
                    NavigationBarItem(
                        icon = { Icon(Icons.Filled.Home, contentDescription = "Home") },
                        label = { Text("Home") },
                        selected = currentIndex.intValue == 0,
                        onClick = {
                            currentIndex.intValue = 0
                        }
                    )
                    NavigationBarItem(
                        icon = { Icon(Icons.Filled.Favorite, contentDescription = "Favorite") },
                        label = { Text("Favorite") },
                        selected = currentIndex.intValue == 1,
                        onClick = {
                            currentIndex.intValue = 1
                        }
                    )
                    NavigationBarItem(
                        icon = { Icon(Icons.Filled.Settings, contentDescription = "Settings") },
                        label = { Text("Settings") },
                        selected = currentIndex.intValue == 2,
                        onClick = {
                            currentIndex.intValue = 2
                        }
                    )

                }
            }
        )
    }
}

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

Video