En esta guía, se muestra cómo puedes hacer que el ícono de navegación en una app principal barra realizan acciones de navegación.
Ejemplo
El siguiente fragmento es un ejemplo mínimo de cómo puedes implementar una app principal con un ícono de navegación funcional. En este caso, el icono 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), ) } }
Puntos clave sobre el código
Ten en cuenta lo siguiente en este ejemplo:
- El elemento componible
TopBarNavigationExample
define un parámetronavigateBack
del tipo() -> Unit
. - Pasa
navigateBack
para el parámetronavigationIcon
deCenterAlignedTopAppBar
Por lo tanto, cada vez que el usuario hace clic en el ícono de navegación en la parte superior de la app,
llama a navigateBack()
.
Cómo pasar una función
En este ejemplo, se usa una flecha hacia atrás para el ícono. Por lo tanto, el argumento para
navigateBack()
debe llevar al usuario al destino anterior.
Para ello, pasa una llamada a TopBarNavigationExample
a
NavController.popBackStack()
Lo haces donde construyes tu
de navegación. Por ejemplo:
NavHost(navController, startDestination = "home") {
composable("topBarNavigationExample") {
TopBarNavigationExample{ navController.popBackStack() }
}
// Other destinations...
Recursos adicionales
Si deseas obtener más información para implementar la navegación en tu app, consulta la la siguiente serie de guías:
- Navigation con Compose
- Cómo crear un NavController
- Cómo diseñar tu gráfico de navegación
- Cómo navegar a un elemento componible