Naviguer depuis la barre d'application supérieure

Ce guide explique comment faire en sorte que l'icône de navigation d'une barre d'application supérieure effectue des actions de navigation.

Exemple

L'extrait de code suivant est un exemple minimal de la façon dont vous pouvez implémenter une barre d'application supérieure avec une icône de navigation fonctionnelle. Dans ce cas, l'icône redirige l'utilisateur vers sa destination précédente dans l'application:

@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

Points clés concernant le code

Notez les points suivants dans cet exemple:

  • Le composable TopBarNavigationExample définit un paramètre navigateBack de type () -> Unit.
  • Il transmet navigateBack pour le paramètre navigationIcon de CenterAlignedTopAppBar.

Par conséquent, chaque fois que l'utilisateur clique sur l'icône de navigation dans la barre d'application supérieure, il appelle navigateBack().

Transmettre une fonction

Cet exemple utilise une flèche de retour comme icône. Par conséquent, l'argument de navigateBack() doit rediriger l'utilisateur vers la destination précédente.

Pour ce faire, transmettez à TopBarNavigationExample un appel à NavController.popBackStack(). Vous le faites lorsque vous créez votre graphique de navigation. Exemple :

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

Ressources supplémentaires

Pour en savoir plus sur l'implémentation de la navigation dans votre application, consultez la série de guides suivante: