Von der oberen App-Leiste aus navigieren

In diesem Leitfaden wird gezeigt, wie Sie das Navigationssymbol in einer oberen App Leiste so einrichten, dass es Navigationsaktionen ausführt.

Beispiel

Das folgende Snippet ist ein minimales Beispiel dafür, wie Sie eine obere App-Leiste mit einem funktionalen Navigationssymbol implementieren können. 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 Informationen zum Code

Beachten Sie in diesem Beispiel Folgendes:

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

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

Funktion übergeben

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

Übergeben Sie dazu TopBarNavigationExample einen Aufruf von NavController.popBackStack(). Dies geschieht dort, wo Sie Ihr Navigations diagramm 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 der folgenden Reihe von Leitfäden: