Von der oberen App-Leiste aus navigieren

In dieser Anleitung 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 wird der Nutzer über das Symbol zum vorherigen Ziel in der App weitergeleitet:

@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 Punkte zum Code

Beachten Sie in diesem Beispiel Folgendes:

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

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

Funktion übergeben

In diesem Beispiel wird ein Rückwärtspfeil als Symbol verwendet. Daher sollte das Argument für navigateBack() den Nutzer zum vorherigen Ziel führen.

Übergeben Sie dazu TopBarNavigationExample an einen Aufruf von NavController.popBackStack(). Das tun Sie dort, wo Sie den Navigationsgraphen erstellen. Beispiel:

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

Zusätzliche Ressourcen

Weitere Informationen zur Implementierung der Navigation in Ihrer App finden Sie in den folgenden Leitfäden: