Naviga dalla barra delle app in alto

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

Esempio

Il seguente snippet è un esempio minimo di come implementare una barra delle app superiore 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 del codice

In questo esempio, tieni presente quanto segue:

  • 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 parte superiore dell'app, viene chiamato navigateBack().

Passare una funzione

Questo esempio utilizza una freccia indietro come icona. Pertanto, l'argomento per navigateBack() deve portare l'utente alla destinazione precedente.

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

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

Risorse aggiuntive

Per saperne di più su come implementare la navigazione nella tua app, consulta la seguente serie di guide: