El componente del panel lateral de navegación es un menú deslizable que permite a los usuarios navegar a varias secciones de tu aplicación. Los usuarios pueden activarlo deslizando el dedo desde los costados o tocando un icono de menú.
Considera estos tres casos de uso para implementar un panel lateral de navegación:
- Organización de contenido: Permite que los usuarios cambien entre diferentes. categorías, como en aplicaciones de noticias o blogs.
- Administración de la cuenta: Proporciona vínculos rápidos al perfil y la configuración de la cuenta. en apps con cuentas de usuario.
- Descubrimiento de funciones: Organiza varias funciones y parámetros de configuración en un solo menú para facilitar el descubrimiento y el acceso de los usuarios en apps complejas.
En Material Design, hay dos tipos de paneles laterales de navegación:
- Estándar: Comparte el espacio dentro de una pantalla con otro contenido.
- Modal: Aparece sobre otro contenido en una pantalla.
Ejemplo
Puedes usar el elemento componible ModalNavigationDrawer
para implementar un
panel lateral de navegación.
Usa el espacio drawerContent
para proporcionar un ModalDrawerSheet
y proporciona
el contenido del panel lateral, como en el siguiente ejemplo:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { Text("Drawer title", modifier = Modifier.padding(16.dp)) HorizontalDivider() NavigationDrawerItem( label = { Text(text = "Drawer Item") }, selected = false, onClick = { /*TODO*/ } ) // ...other drawer items } } ) { // Screen content }
ModalNavigationDrawer
acepta una cantidad de parámetros adicionales de panel lateral. Por ejemplo, puedes activar o desactivar si el panel lateral responde a arrastres con el parámetro gesturesEnabled
, como en el siguiente ejemplo:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
Controla el comportamiento
Para controlar cómo se abre y se cierra el panel lateral, usa DrawerState
. Debes pasar un DrawerState
a ModalNavigationDrawer
con el parámetro drawerState
.
DrawerState
proporciona acceso a las funciones open
y close
, como
y las propiedades relacionadas con el estado actual del panel lateral. Estos se suspenden
funciones requieren un CoroutineScope
, del que puedes crear una instancia con
rememberCoroutineScope
También puedes llamar a las funciones de suspensión en respuesta a eventos de la IU.
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 } }