Naviga dalla barra delle app in alto

Questa guida illustra come fare in modo che l'icona di navigazione in una barra delle app in alto esegua azioni di navigazione.

Esempio

Lo snippet seguente è un esempio minimo di come implementare una barra delle app in alto con un'icona di navigazione funzionale. In questo caso, l'icona porta l'utente alla destinazione precedente nell'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

Punti chiave sul codice

In questo esempio, tieni presente quanto segue:

  • L'elemento componibile TopBarNavigationExample definisce un parametro navigateBack di tipo () -> Unit.
  • Passa navigateBack per il parametro navigationIcon di CenterAlignedTopAppBar.

Pertanto, ogni volta che l'utente fa clic sull'icona di navigazione nell'app in alto, richiama navigateBack().

Passare una funzione

In questo esempio viene utilizzata una Freccia indietro per l'icona. Di conseguenza, l'argomento per navigateBack() dovrebbe portare l'utente alla destinazione precedente.

Per farlo, passa una chiamata TopBarNavigationExample a NavController.popBackStack(). A questo scopo, crei il tuo grafico di navigazione. Ecco alcuni esempi:

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

Risorse aggiuntive

Per ulteriori informazioni su come implementare la navigazione nella tua app, consulta la seguente serie di guide: