Dzięki Jetpack Compose system Android rezygnuje z niejawnych sposobów poruszania się za pomocą fragmentarycznych transakcji, nawigacji i intencji działań. W dzisiejszych czasach aplikacja powinna na początku deklarować wszystkie możliwe ścieżki, którymi może podążać użytkownik.

Jetpack Compose zapewnia natywny sposób poruszania się po wielu komponentach. Dzięki NavHost i NavController możesz przesuwać lub przesuwać swoje komponowalne elementy według potrzeb. Więc przejdźmy do tego.

Zależności

Po pierwsze, musisz dodać zależność do swojego projektu. Aby uzyskać aktualną wersję, przejdź tutaj .

implementation "androidx.navigation:navigation-compose:2.5.3"

Realizacja

Najpierw do projektu wprowadzane są NavHost i NavController .

NavHost przechowuje deklarację tras, którymi mogą podążać użytkownicy. NavController udostępnia API do poruszania się po zadeklarowanych trasach. Trasa to ścieżka, która jest unikalna dla każdego ekranu/innego elementu komponowalnego, który można wyświetlić w aplikacji.

Instancja

NavController jest tworzony za pomocą funkcji RememberNavController(), więc nawet po przebudowie elementów składowych NavController jest taki sam.

Początkowe miejsce docelowe

Zadeklarowano NavHost z NavControllerem i początkowym miejscem docelowym. Punkt startowy to nazwa naszej trasy na pierwszym ekranie.

Deklaracja tras

Wszystkie opcje są zadeklarowane, gdzie użytkownik może się poruszać. Oba ekrany muszą zadeklarować trasy. Nazwa trasy jest unikatowa, ponieważ NavController użyje jej do zidentyfikowania następnej kompozycji do wyświetlenia.

Każdy element komponowalny można wyświetlić za pomocą navcontroller.navigate("route to composable").

Aby naśladować przycisk Wstecz użytkownika, można użyć metody navcontroller.popBackStack(). Spowoduje to wyskoczenie bieżącego komponowalnego ze stosu wszystkich komponowalnych.

Stos może być postrzegany jako historia elementów składowych/ekranów, więc pierwszy ekran to katalog główny, a pozostałe elementy składowe są na nim umieszczane . Tak więc, przechodząc do drugiego ekranu, drugi ekran jest dodawany na górze stosu. Wysuwając stos, usuwa się górną kompozycję.

Sprzątać

Aby być bardziej podatnym na błędy w przyszłości, [aths należy deklarować w bardziej przejrzysty sposób. Dlatego unikaj dodawania ciągów wszędzie i utwórz samodzielny plik, w którym umieścisz wszystkie trasy dla swojej aplikacji. Następnie należy użyć zadeklarowanych stałych. W przyszłości unikniesz kłopotliwych literówek. Ponadto zapewnia bardziej opisowy widok struktury aplikacji.

Przechodzenie przez wiele ekranów i powrót do katalogu głównego

Od teraz dodawanie kolejnych ekranów do naszej nawigacji jest proste. NavHost musi zostać rozszerzony o jeszcze jeden komponowalny, a ekrany muszą przyjąć więcej przycisków do poruszania się.

Trzeci ekran zawiera przycisk, który przenosi użytkownika z powrotem do pierwszego ekranu i czyści wszystkie ułożone elementy.

Aby umieścić wiele elementów składowych na stosie, można użyć navController.popBackStack("Ekran, na którym chcesz zatrzymać wyświetlanie", włącznie z: false).

Parametr inclusive mówi nam, czy docelowe elementy komponowane również powinny zostać usunięte. Usunięcie pierwszego ekranu spowodowałoby wyświetlenie pustego ekranu, więc przekazywana jest wartość fałszywa.

Przekazywanie wartości na ekran

Większość aplikacji chce pokazywać informacje lub dane zależne od wcześniejszego wyboru użytkownika. Inny ekran musi wiedzieć, co pokazać, więc wartość musi zostać przekazana.

Odbywa się to poprzez umieszczenie wartości wewnątrz trasy, więc wartość jest kodowana jako łańcuch, a następnie analizowana na innym ekranie.

Deklaracja

Po pierwsze, trasa musi zadeklarować obecność wartości, co odbywa się w następujący sposób:

const val SECOND_SCREEN = "SecondScreen/{customValue}"
// where the {customValue} is placeholder for the passed value

composable(
    Routes.SECOND_SCREEN,
    arguments = listOf(navArgument("customValue") {
        type = NavType.StringType
    })
) { backStackEntry ->
    ThirdScreen(
        navigation = navController,
        // callback to add new composable to backstack 
        // it contains the arguments field with our value
        textToShow = backStackEntry.arguments?.getString(
            "customValue", // key for our value
            "Default value" // default value
        )
    )
}

val valueToPass = "Information for next screen"
val routeToScreenWithValue = "SecondScreen/$valueToPass"
navigation.navigate(routeToScreenWithValue)

Pierwszy ekran zawiera teraz jedno pole tekstowe, którego zawartość jest przekazywana do drugiego ekranu.

Nie przekazuj skomplikowanych danych do widoków w nawigacji

Do widoku należy przekazać tylko jedną wartość. Inne dane należy uzyskać za pomocą ViewModel lub innej jednostki logicznej. Sprawi, że Twój kod będzie znacznie czystszy i łatwiejszy do przetestowania.

Na przykład, jeśli chcesz wyświetlić szczegółowe informacje o produkcie lub użytkowniku, identyfikator powinien zostać przekazany tylko do widoku. Jednostka logiczna uzyskuje identyfikator i wyszukuje bardziej szczegółowe informacje z Internetu lub bazy danych. Dane są następnie przekazywane bezpośrednio do widoku bez pomocy komponentów nawigacyjnych.

Zasoby:

Więcej informacji o rozwoju Androida: