Naviga dalla barra delle app in alto

Questa guida mostra come fare in modo che l'icona di navigazione in una barra di app superiore esegua azioni di navigazione.

Esempio

Lo snippet seguente è un esempio minimo di come implementare una barra di app superiore con un'icona di navigazione funzionale. In questo caso, l'icona rimanda 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 del codice

Tieni presente quanto segue in questo esempio:

  • Il composable 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 nella barra di navigazione superiore dell'app, viene chiamata navigateBack().

Passare una funzione

In questo esempio viene utilizzata una freccia indietro per l'icona. Di conseguenza, l'argomento per navigateBack() deve indirizzare l'utente alla destinazione precedente.

Per farlo, passa a TopBarNavigationExample una chiamata a NavController.popBackStack(). Devi farlo dove crei il tuo grafico di navigazione. Ad esempio:

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: