Naviguer depuis la barre d'application supérieure

Ce guide explique comment créer l'icône de navigation dans une application populaire barre d'adresse pour effectuer des actions de navigation.

Exemple

L'extrait de code suivant est un exemple minimal d'implémentation d'une application populaire avec une icône de navigation fonctionnelle. Dans ce cas, l'icône mène 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.
  • Elle transmet navigateBack pour le paramètre navigationIcon de CenterAlignedTopAppBar

Ainsi, chaque fois que l'utilisateur clique sur l'icône de navigation dans l'appli supérieure, appelle navigateBack().

Transmettre une fonction

Cet exemple utilise une flèche de retour en arrière pour l'icône. Ainsi, l'argument de navigateBack() doit rediriger l'utilisateur vers la destination précédente.

Pour ce faire, transmettez un appel à TopBarNavigationExample à NavController.popBackStack() Pour cela, vous développez votre de navigation. Exemple :

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

Ressources supplémentaires

Pour savoir comment implémenter la navigation dans votre application, consultez la de la série de guides suivante: