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 Minimalbeispiel dafür, wie Sie eine obere App-Leiste mit einem funktionalen Navigationssymbol implementieren können. 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:

  • Der zusammensetzbare 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 klickt, wird navigateBack() aufgerufen.

Funktion übergeben

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

Übergeben Sie dazu TopBarNavigationExample einen Aufruf an NavController.popBackStack(). Dort erstellen Sie die Navigationsgrafik. 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: