Von der oberen App-Leiste aus navigieren

In dieser Anleitung wird beschrieben, wie Sie über das Navigationssymbol in einer oberen App-Leiste Navigationsaktionen ausführen.

Beispiel

Das folgende Snippet ist ein minimales Beispiel dafür, wie du eine obere App-Leiste mit einem funktionalen Navigationssymbol implementieren kannst. In diesem Fall leitet das Symbol den Nutzer zu seinem vorherigen Ziel in der App weiter:

@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

Wichtige Informationen zum Code

Beachten Sie in diesem Beispiel Folgendes:

  • Die zusammensetzbare TopBarNavigationExample definiert einen Parameter navigateBack des Typs () -> Unit.
  • Sie übergibt navigateBack für den Parameter navigationIcon von CenterAlignedTopAppBar.

Wenn der Nutzer also wieder auf das Navigationssymbol in der oberen App klickt, wird navigateBack() aufgerufen.

Funktion übergeben

In diesem Beispiel wird als Symbol ein Zurück-Pfeil verwendet. Daher sollte das Argument für navigateBack() den Nutzer zum vorherigen Ziel weiterleiten.

Dazu übergeben Sie TopBarNavigationExample einen Aufruf an NavController.popBackStack(). Dort erstellen Sie die Navigationsgrafik. Beispiel:

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

Zusätzliche Ressourcen

Weitere Informationen zum Implementieren der Navigation in Ihrer App finden Sie in den folgenden Leitfäden: