El componente del panel lateral de navegación es un menú desplegable que permite a los usuarios navegar a varias secciones de tu app. Para activarlo, desliza el dedo desde un lado o presiona un ícono de menú.
Considera estos tres casos de uso para implementar un panel lateral de navegación:
- Organización del contenido: Permite a los usuarios cambiar entre diferentes categorías, como en apps de noticias o de blogs.
- Administración de cuentas: Proporciona vínculos rápidos a la configuración de la cuenta y las secciones de perfil 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 de los usuarios y el acceso 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 el resto del contenido dentro de 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 el contenido del panel lateral, como en el siguiente ejemplo:
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 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 se muestra en el siguiente ejemplo:
ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet {
// Drawer contents
}
},
gesturesEnabled = false
) {
// Screen content
}
Comportamiento de control
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, así como a propiedades relacionadas con el estado actual del panel lateral. Estas funciones de suspensión requieren un CoroutineScope, del que puedes crear una instancia con rememberCoroutineScope. También puedes llamar a las funciones de suspensión en respuesta a los 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
}
}