Naviga dalla barra delle app in alto

Questa guida spiega come creare un'icona di navigazione in un'app principale di Google Cloud eseguono azioni di navigazione.

Esempio

Il seguente snippet è un esempio minimo di come implementare un'app principale barra con un'icona di navigazione funzionante. In questo caso, l'icona porta l'utente a la 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.

Di conseguenza, ogni volta che l'utente fa clic sull'icona di navigazione nell'app in alto, chiama 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.

A questo scopo, passa una chiamata a TopBarNavigationExample NavController.popBackStack() Puoi farlo dove crei i tuoi 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 le seguente serie di guide: