Von der oberen App-Leiste aus navigieren

In dieser Anleitung wird gezeigt, wie Sie das Navigationssymbol in einer oberen App-Leiste so konfigurieren, dass es Navigationsaktionen ausführt.

Verwendungsbeispiele

Das folgende Snippet ist ein minimales Beispiel dafür, wie du eine obere App-Leiste mit einem funktionalen Navigationssymbol implementieren kannst. In diesem Fall wird der Nutzer über das Symbol zu seinem 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 TopBarNavigationExample definiert einen Parameter navigateBack des Typs () -> Unit.
  • Es wird navigateBack für den Parameter navigationIcon von CenterAlignedTopAppBar übergeben.

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

Funktion übergeben

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

Übergeben Sie dazu TopBarNavigationExample einen Aufruf an NavController.popBackStack(). Das tun Sie, wenn Sie Ihren Navigationsgraphen erstellen. Beispiel:

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

Weitere Informationen

Weitere Informationen zur Navigation in Ihrer App finden Sie in den folgenden Anleitungen: