In dieser Anleitung wird beschrieben, wie Sie über das Navigationssymbol in einer oberen App-Leiste Navigationsaktionen ausführen.
Beispiel
Das folgende Snippet ist ein minimales Beispiel dafür, wie du eine obere App-Leiste mit einem funktionalen Navigationssymbol implementieren kannst. 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), ) } }
Wichtige Informationen zum Code
Beachten Sie in diesem Beispiel Folgendes:
- Die zusammensetzbare
TopBarNavigationExample
definiert einen ParameternavigateBack
des Typs() -> Unit
. - Sie übergibt
navigateBack
für den ParameternavigationIcon
vonCenterAlignedTopAppBar
.
Wenn der Nutzer also wieder auf das Navigationssymbol in der oberen App klickt, wird navigateBack()
aufgerufen.
Funktion übergeben
In diesem Beispiel wird als Symbol ein Zurück-Pfeil verwendet. Daher sollte das Argument für navigateBack()
den Nutzer zum vorherigen Ziel weiterleiten.
Dazu übergeben Sie TopBarNavigationExample
einen Aufruf an NavController.popBackStack()
. Dort erstellen Sie die Navigationsgrafik. 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 den folgenden Leitfäden:
- Navigation mit der Funktion „Schreiben“
- NavController erstellen
- Navigationsdiagramm entwerfen
- Rufen Sie eine zusammensetzbare Funktion auf.