Ten przewodnik pokazuje, jak utworzyć ikonę nawigacji w najpopularniejszej aplikacji do wykonywania działań nawigacyjnych.
Przykład
Ten fragment to tylko minimalny przykład implementacji najpopularniejszej aplikacji z funkcjonalną ikoną nawigacji. W tym przypadku ikona przeniesie użytkownika na stronę poprzednie miejsce docelowe 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:
- Element kompozycyjny
TopBarNavigationExample
definiuje parametrnavigateBack
typu() -> Unit
. - Przekazuje wartość
navigateBack
dla parametrunavigationIcon
funkcjiCenterAlignedTopAppBar
Dlatego kliknięcie ikony nawigacji w górnej części aplikacji powoduje,
dzwoni pod numer navigateBack()
.
Przekazywanie funkcji
W tym przykładzie dla ikony jest używana strzałka wstecz. W związku z tym argument dla
Aplikacja navigateBack()
powinna przekierować użytkownika do poprzedniego miejsca docelowego.
W tym celu przekaż użytkownikowi TopBarNavigationExample
połączenie
NavController.popBackStack()
W tym celu tworzysz
nawigacji. 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