Panel lateral de navegación

El componente del panel lateral de navegación es un menú deslizante que permite a los usuarios navegar por varias secciones de tu app. Para activarlo, los usuarios deben deslizar el dedo desde el costado o presionar un ícono de menú.

Considera estos tres casos de uso para implementar un panel lateral de navegación:

• Organización del contenido: Permite que los usuarios cambien entre diferentes categorías, como en las apps de noticias o blogs.
• Administración de la cuenta: Proporciona vínculos rápidos a la configuración de la cuenta y a 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 y el acceso de los usuarios en apps complejas.

En Material Design, existen dos tipos de paneles laterales de navegación:

• Estándar: Comparte el espacio de una pantalla con otro contenido.
• Modal: Aparece sobre otro 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))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

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
}
MaterialLayoutSnippets.kt

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, 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 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
    }
}
MaterialLayoutSnippets.kt