Cómo navegar desde la barra superior de la app

En esta guía, se muestra cómo hacer que el ícono de navegación de una barra de la app superior realice acciones de navegación.

Ejemplo

El siguiente fragmento es un ejemplo mínimo de cómo puedes implementar una barra de la parte superior de la app con un ícono de navegación funcional. En este caso, el ícono lleva al usuario a su destino anterior en la app:

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}
AppBar.kt

Puntos clave sobre el código

En este ejemplo, ten en cuenta lo siguiente:

  • El elemento TopBarNavigationExample componible define un parámetro navigateBack de tipo () -> Unit.
  • Pasa navigateBack para el parámetro navigationIcon de CenterAlignedTopAppBar.

Por lo tanto, cada vez que el usuario hace clic en el ícono de navegación en la parte superior de la app, se llama a navigateBack().

Cómo pasar una función

En este ejemplo, se usa una flecha hacia atrás como ícono. Por lo tanto, el argumento para navigateBack() debería llevar al usuario al destino anterior.

Para ello, pasa TopBarNavigationExample una llamada a NavController.popBackStack(). Esto se hace donde compilas tu gráfico de navegación. Por ejemplo:

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

Recursos adicionales

Para obtener más información sobre cómo implementar la navegación en tu app, consulta la siguiente serie de guías: