Komponen panel navigasi adalah menu slide-in yang memungkinkan pengguna menjelajahi ke berbagai bagian dari aplikasi Anda. Pengguna dapat mengaktifkannya dengan menggeser dari samping atau mengetuk ikon menu.
Pertimbangkan tiga kasus penggunaan berikut untuk menerapkan Panel Navigasi:
- Pengaturan konten: Memungkinkan pengguna beralih di antara berbagai kategori, seperti dalam aplikasi berita atau blogging.
- Pengelolaan akun: Memberikan link cepat ke setelan dan profil akun dalam aplikasi dengan akun pengguna.
- Penemuan fitur: Atur beberapa fitur dan setelan dalam satu perangkat untuk memfasilitasi penemuan dan akses pengguna di aplikasi yang kompleks.
Di Desain Material, 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 menerapkan
panel navigasi baru.
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 }
ModalNavigationDrawer
menerima sejumlah parameter panel samping tambahan. Sebagai
misalnya, Anda dapat beralih apakah panel samping merespons tarik dengan
gesturesEnabled
seperti dalam contoh berikut:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
Perilaku kontrol
Untuk mengontrol cara panel samping terbuka dan tertutup, gunakan DrawerState
. Anda seharusnya
teruskan DrawerState
ke ModalNavigationDrawer
menggunakan drawerState
.
DrawerState
memberikan akses ke fungsi open
dan close
, sebagai
serta properti yang terkait dengan status panel samping saat ini. Penangguhan ini
fungsi memerlukan CoroutineScope
, yang dapat Anda buat instance-nya menggunakan
rememberCoroutineScope
. Anda juga dapat memanggil fungsi penangguhan di
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 } }