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 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:

  • Der zusammensetzbare 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 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 also zum vorherigen Ziel führen.

Übergeben Sie dazu TopBarNavigationExample einen Aufruf an NavController.popBackStack(). Das tun Sie, wenn Sie den 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: