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 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.

Ainsi, chaque fois que l'utilisateur clique sur l'icône de navigation dans la barre d'application supérieure, navigateBack() est appelé.

Transmettre une fonction

Cet exemple utilise une flèche vers l'arrière pour l'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(). Pour ce faire, vous devez créer votre graphe 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 :