Von der oberen App-Leiste aus navigieren

In diesem Leitfaden wird gezeigt, wie Sie das Navigationssymbol in einer oberen App-Leiste für Navigationsaktionen verwenden können.

Beispiel

Das folgende Snippet ist ein Minimalbeispiel für die Implementierung einer oberen App-Leiste mit einem funktionalen Navigationssymbol. In diesem Fall führt das Symbol den Nutzer zum vorherigen Ziel in der 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),
        )
    }
}

Wichtige Punkte zum Code

Beachten Sie in diesem Beispiel Folgendes:

  • Die zusammensetzbare Funktion TopBarNavigationExample definiert einen Parameter navigateBack vom Typ () -> Unit.
  • Für den Parameter navigationIcon von CenterAlignedTopAppBar wird navigateBack übergeben.

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

Funktion übergeben

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

Übergeben Sie dazu TopBarNavigationExample einen Aufruf an NavController.popBackStack(). Dies tun Sie dort, wo Sie Ihren Navigationsgraphen erstellen. 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: