Z tego przewodnika dowiesz się, jak za pomocą ikony nawigacji na górnym pasku aplikacji wykonywać działania nawigacyjne.
Przykład
Ten fragment to krótki przykład implementacji górnego paska aplikacji z funkcjonalną ikoną nawigacji. W takim przypadku ikona przekieruje użytkownika do poprzedniego miejsca docelowego w aplikacji:
@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), ) } }
Najważniejsze informacje o kodzie
Pamiętaj o tych uwagach w tym przykładzie:
- Funkcja kompozycyjna
TopBarNavigationExample
definiuje parametrnavigateBack
typu() -> Unit
. - Przekazuje wartość
navigateBack
dla parametrunavigationIcon
parametruCenterAlignedTopAppBar
.
Dlatego każde kliknięcie ikony nawigacji u góry aplikacji powoduje wywołanie navigateBack()
.
Przekazywanie funkcji
W tym przykładzie dla ikony jest używana strzałka wstecz. W związku z tym argument navigateBack()
powinien kierować użytkownika do poprzedniego miejsca docelowego.
W tym celu przekaż użytkownikowi TopBarNavigationExample
połączenie z numerem
NavController.popBackStack()
. W tym miejscu możesz utworzyć wykres nawigacyjny. Na przykład:
NavHost(navController, startDestination = "home") {
composable("topBarNavigationExample") {
TopBarNavigationExample{ navController.popBackStack() }
}
// Other destinations...
Dodatkowe materiały
Więcej informacji o implementowaniu nawigacji w aplikacji znajdziesz w tej serii przewodników:
- Nawigacja z opcją tworzenia wiadomości
- Tworzenie kontrolera NavController
- Projektowanie wykresu nawigacyjnego
- Przechodzenie do funkcji kompozycyjnej