Panel navigasi

Komponen panel navigasi adalah menu slide-in yang memungkinkan pengguna membuka berbagai bagian aplikasi Anda. Pengguna dapat mengaktifkannya dengan menggeser dari samping atau mengetuk ikon menu.

Pertimbangkan tiga kasus penggunaan berikut untuk menerapkan Panel Navigasi:

• Penyusunan konten: Memungkinkan pengguna beralih di antara berbagai kategori, seperti pada aplikasi berita atau blogging.
• Pengelolaan akun: Memberikan link cepat ke setelan akun dan bagian profil di aplikasi dengan akun pengguna.
• Penemuan fitur: Atur beberapa fitur dan setelan dalam satu menu untuk memfasilitasi penemuan dan akses pengguna di aplikasi yang kompleks.

Dalam Material Design, ada dua jenis panel navigasi:

• Standar: Berbagi ruang dalam layar dengan konten lain.
• Modal: Muncul di atas konten lain dalam layar.

Contoh

Anda dapat menggunakan composable ModalNavigationDrawer untuk mengimplementasikan panel navigasi.

Gunakan slot drawerContent untuk menyediakan ModalDrawerSheet dan menyediakan konten panel samping, seperti dalam contoh berikut:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            Divider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer menerima sejumlah parameter panel samping tambahan. Misalnya, Anda dapat beralih apakah panel samping akan merespons tarik dengan parameter gesturesEnabled seperti pada contoh berikut:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

Perilaku kontrol

Untuk mengontrol cara panel samping terbuka dan tertutup, gunakan DrawerState. Anda harus meneruskan DrawerState ke ModalNavigationDrawer menggunakan parameter drawerState.

DrawerState memberikan akses ke fungsi open dan close, serta properti yang terkait dengan status panel samping saat ini. Fungsi penangguhan ini memerlukan CoroutineScope, yang dapat Anda buat instance-nya menggunakan rememberCoroutineScope. Anda juga dapat memanggil fungsi penangguhan sebagai respons terhadap peristiwa UI.

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt