Interfejs Navigation Compose API umożliwia przechodzenie między elementami kompozycyjnymi w Compose, korzystając z komponentu Jetpack Navigation, infrastruktury i funkcji.
Na tej stronie dowiesz się, jak przejść z Nawigacji Jetpack opartej na fragmentach na Navigation Compose w ramach większej migracji interfejsu opartej na widoku do Jetpack Utwórz.
Wymagania wstępne migracji
Po zastąpieniu wszystkich elementów Fragmenty z odpowiednimi elementami kompozycyjnymi ekranu. Elementy kompozycyjne ekranu mogą zawierać połączenie tworzenia i wyświetlania treści, ale wszystkie miejsca docelowe nawigacji muszą być composables, aby włączyć migrację usługi Navigation Compose. Do tego czasu nadal używaj komponentu nawigacji opartej na fragmentach w widoku interoperacyjności i Tworzenie bazy kodu. Więcej informacji znajdziesz w dokumentacji interoperacyjności nawigacji i informacjami o nich.
Korzystanie z funkcji tworzenia nawigacji w aplikacji tylko do tworzenia wiadomości nie jest wymagane. Dostępne opcje nadal używaj komponentu nawigacji opartego na fragmentach, jeśli będziesz Fragmenty do hostowania treści kompozycyjnych.
Etapy migracji
Niezależnie od tego, czy stosujesz naszą zalecaną strategię migracji, czy podejmujesz lub inną trasę, dotrzesz do punktu, w którym wszystkie miejsca docelowe nawigacji z elementami kompozycyjnymi ekranu, gdzie fragmenty działają tylko jako kontenery kompozycyjne. W tym miejscu możesz przejść na funkcję Navigation Compose.
Jeśli Twoja aplikacja jest już zgodna ze wzorcem projektu UDF i naszym przewodnikiem , migracja do Jetpack Compose i Navigation Compose nie powinna wymagają dużych refaktoryzacji innych warstw aplikacji oprócz warstwy interfejsu.
Aby przenieść dane do Navigation Compose, wykonaj te czynności:
- Dodaj do swojej aplikacji zależność nawigacji.
Utwórz kompozycję
App-level
i dodaj ją do elementuActivity
jako Utwórz punkt wejścia, zastępując konfigurację układu widoku:class SampleActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample) setContent { SampleApp(/* ... */) } } }
Skonfiguruj
NavController
w miejscu, w którym wszystkie elementy kompozycyjne, które wymagają aby się do niego odwołać i mieć do niego dostęp (zazwyczaj znajduje się on w sekcjiApp
lub kompozycyjne). Takie podejście jest zgodne z zasadami przenoszenia państwa pozwala używaćNavController
jako źródła informacji do nawigacji między ekranami kompozycyjnymi a utrzymaniem tylnego stosu:@Composable fun SampleApp() { val navController = rememberNavController() // ... }
Utwórz komponent
NavHost
swojej aplikacji w funkcji kompozycyjnej aplikacji i przekażnavController
:@Composable fun SampleApp() { val navController = rememberNavController() SampleNavHost(navController = navController) } @Composable fun SampleNavHost( navController: NavHostController ) { NavHost(navController = navController, startDestination = "first") { // ... } }
Dodaj miejsca docelowe (
composable
), aby utworzyć wykres nawigacji. Jeśli każdy ekran został wcześniej przeniesiony do Utwórz, ten krok składa się tylko wyodrębniam te elementy kompozycyjne ekranu z fragmentów kodu docomposable
miejsca docelowe:class FirstFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { return ComposeView(requireContext()).apply { setContent { // FirstScreen(...) EXTRACT FROM HERE } } } } @Composable fun SampleNavHost( navController: NavHostController ) { NavHost(navController = navController, startDestination = "first") { composable("first") { FirstScreen(/* ... */) // EXTRACT TO HERE } composable("second") { SecondScreen(/* ... */) } // ... } }
Jeśli wykonasz instrukcje tworzenia architektury interfejsu Compose, konkretnie jak powinny być przekazywane elementy
ViewModel
i zdarzenia nawigacji do composable, kolejny krok to zmiana sposobu rozpowszechnianiaViewModel
dla każdego ekranu. Często można korzystać z wstrzykiwania Hilt i jego integracji za pomocą funkcji Utwórz i Nawigacji nahiltViewModel
:@Composable fun FirstScreen( // viewModel: FirstViewModel = viewModel(), viewModel: FirstViewModel = hiltViewModel(), onButtonClick: () -> Unit = {}, ) { // ... }
Zamień wszystkie
findNavController()
połączenia nawigacyjne nanavController
i przekazują je jako zdarzenia nawigacji do każdego ekranu kompozycyjnego, niż cała wartośćnavController
. Ta metoda jest zgodna z najlepszymi metod ujawniania zdarzeń z funkcji kompozycyjnych wywołującym pozwala zachowaćnavController
jako jedyne źródło prawdy.- Jeśli wcześniej wtyczka Safe Args była używana do generowania wskazówek dojazdu i działań, zastąp ją trasą – Ścieżka ciągu do funkcji kompozycyjnej, która jest niepowtarzalna dla każdego miejsca docelowego.
- Informacje o zastępowaniu bezpiecznych argumentów podczas przekazywania danych znajdziesz w sekcji Nawigacja przy użyciu .
Aby dowiedzieć się, jak zapewnić bezpieczeństwo typów w nawigacji, zapoznaj się z sekcją Bezpieczne argumenty. poniżej.
@Composable fun SampleNavHost( navController: NavHostController ) { NavHost(navController = navController, startDestination = "first") { composable("first") { FirstScreen( onButtonClick = { // findNavController().navigate(firstScreenToSecondScreenAction) navController.navigate("second_screen_route") } ) } composable("second") { SecondScreen( onIconClick = { // findNavController().navigate(secondScreenToThirdScreenAction) navController.navigate("third_screen_route") } ) } // ... } }
Usuń wszystkie fragmenty, odpowiednie układy XML, niepotrzebne elementy nawigacyjne itp. zasobów i nieaktualnych zależności fragmentów kodu i Jetpack Navigation.
Informacje o tych samych krokach i więcej informacji związanych z tworzeniem nawigacji znajdziesz w Dokumentacja konfiguracji
Częste zastosowania
Niezależnie od używanego komponentu Nawigacja obowiązują te same zasady obowiązująca nawigacja.
Oto typowe przypadki użycia:
- Przechodzenie do funkcji kompozycyjnej
- Nawigacja za pomocą argumentów
- Precyzyjne linki
- Nawigacja zagnieżdżona
- Integracja z dolnym paskiem nawigacyjnym
- Integracja z niestandardowym komponentem nawigacyjnym
Szczegółowe informacje o tych przypadkach użycia znajdziesz w artykule Nawigacja przy użyciu Utwórz.
Safe Args
W przeciwieństwie do Jetpack Navigation Compose Compose nie obsługuje funkcji Safe Wtyczka Args do generowania kodu. Zamiast tego można zapewnić bezpieczeństwo podczas pisania w narzędziu Navigation Compose tak, aby utworzyć taką strukturę kodu w taki sposób, aby łatwo było pisać. w środowisku wykonawczym.
Pobieranie złożonych danych podczas nawigacji
Navigation Compose opiera się na trasach ciągów znaków i w przeciwieństwie do Jetpack Navigation może nie obsługuje przekazywania niestandardowych elementów Parcelables i Serializable jako argumentów.
Zdecydowanie odradzamy pomijanie złożonych obiektów danych podczas nawigacji. Zamiast tego należy przekazać minimalną wymaganą ilość informacji, takich jak unikalny identyfikator lub innej formy identyfikatora, jako argumentów przy wykonywaniu czynności nawigacyjnych. Zalecenia przechowywać złożone obiekty jako dane w jednym źródle wiarygodnych danych, takich jak dane warstwy danych. Więcej informacji znajdziesz w sekcji Pobieranie złożonych danych podczas nawigacji.
Jeśli fragmenty kodu przekazują złożone obiekty jako argumenty, rozważ refaktoryzację. z kodem – w sposób umożliwiający przechowywanie i pobieranie tych obiektów do warstwy danych. Zobacz repozytorium Now w Androidzie dla przykłady.
Ograniczenia
W tej sekcji opisaliśmy obecne ograniczenia funkcji tworzenia nawigacji.
Migracja przyrostowa do Navigation Compose
Obecnie nie możesz korzystać z funkcji Navigation Compose, jeśli nadal używasz fragmentów kodu jako miejsc docelowych w kodzie. Aby zacząć korzystać z funkcji tworzenia nawigacji, wszystkie miejsca docelowe muszą być elementami kompozycyjnymi. Możesz śledzić tę prośbę o dodanie funkcji w Issue Tracker.
Animacje przejścia
Obsługa wprowadzania ustawień niestandardowych od Nawigacja 2.7.0-alfa01
przejścia, wcześniej z AnimatedNavHost
, są teraz
obsługiwane bezpośrednio w NavHost
. Przeczytaj informacje o wersji.
.
Więcej informacji
Więcej informacji na temat migracji do Navigation Compose znajdziesz w tych artykułach zasoby:
- Ćwiczenie z programowania w nawigacji (Nawigacja Compose): opanuj podstawy działania funkcji Navigation Compose w ćwiczenia z programowania.
- Teraz w repozytorium Androida: w pełni funkcjonalna aplikacja na Androida. w całości za pomocą aplikacji Kotlin i Jetpack Compose, które są zgodne z interfejsem Androida i sprawdzonych metod programistycznych, a także obejmuje funkcję Navigation Compose.
- Migracja Sunflower do Jetpack Compose: post na blogu, który zawiera dokumentuje przebieg migracji przykładowej aplikacji Sunflower – od wyświetleń do Tworzenie wiadomości, które obejmuje też migrację do funkcji Navigation Compose.
- Jetnews na każdym ekranie: post na blogu z dokumentami refaktoryzacji i migracji próbki Jetnews, aby zapewnić obsługę wszystkich ekranów Jetpack Compose i Navigation Compose.
Polecane dla Ciebie
- Uwaga: tekst linku wyświetla się, gdy JavaScript jest wyłączony
- Nawigacja w funkcji tworzenia wiadomości
- Utwórz i inne biblioteki
- Inne uwagi