Naviga dalla barra delle app in alto

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

Esempio

Il seguente snippet è un esempio minimo di come puoi implementare una barra dell'app in alto con un'icona di navigazione funzionale. In questo caso, l'icona indirizza 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),
        )
    }
}

Punti chiave sul 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 barra delle app in alto, viene chiamato navigateBack().

Passa una funzione

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

Per farlo, passa TopBarNavigationExample a una chiamata a NavController.popBackStack(). Puoi farlo 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: