Jetpack Compose Academy · Lekcja

Wyróżnianie wybranej trasy

Synchronizuj wybór ze stosem wstecznym

Lekcja 2 z 413 kroki

Wyróżnianie wybranej trasy to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Wybór musi odzwierciedlać rzeczywistość

Karta powinna być wyróżniona na podstawie faktycznego miejsca użytkownika, a nie wartości ustawionej ręcznie. Źródłem prawdy jest back stack. 🧭

Odczytaj bieżący wpis

Pobierz z NavController aktualny currentBackStackEntryAsState. Jest on automatycznie aktualizowany przy każdej zmianie nawigacji.

val entry by navController.currentBackStackEntryAsState()

Pobierz aktywną trasę

Z tego wpisu odczytaj ciąg znaków aktywnej trasy z pola destination. Ten ciąg wskazuje, która karta jest wyświetlana.

val route = entry?.destination?.route

Porównaj, aby oznaczyć wybór

Teraz ustaw selected dla każdego elementu, porównując aktywną trasę z trasą danej karty. Dopasowana karta stanie się wyróżnioną kartą selected.

selected = route == tab.route

Hierarchia ważniejsza niż równość

W przypadku zagnieżdżonych grafów ścisła równość może nie wystarczyć. Sprawdzenie hierarchy miejsca docelowego oznaczy kartę jako aktywną także na jej ekranach podrzędnych.

selected = entry?.destination?.hierarchy?.any {
  it.route == tab.route
} == true

Nawigacja po dotknięciu

W onClick wywołaj navController.navigate z trasą karty, aby przejść do tego miejsca. Wybór będzie odtąd samoczynnie wynikał ze stosu powrotu.

onClick = { navController.navigate(tab.route) }

Unikaj tworzenia kopii na stosie

Wielokrotne dotknięcie karty nie powinno dokładać kolejnych ekranów. Użyj launchSingleTop, aby na wierzchu pozostała tylko jedna kopia miejsca docelowego.

navController.navigate(tab.route) {
  launchSingleTop = true
}

Wróć do początku

Naciśnięcie przycisku Wstecz na dowolnej karcie powinno przenieść do karty głównej, a nie przechodzić przez wszystkie odwiedzone karty. Rozwiązaniem jest użycie popUpTo dla miejsca docelowego początkowego.

popUpTo(navController.graph.startDestinationId) {
  saveState = true
}

Zmień kolor aktywnej karty

NavigationBarItem automatycznie nadaje wybranej karcie odpowiedni odcień, ale możesz dostosować jej wygląd za pomocą colors, aby aktywna karta pasowała do identyfikacji wizualnej aplikacji.

colors = NavigationBarItemDefaults.colors(
  selectedIconColor = MaterialTheme.colorScheme.primary
)

Widoczność etykiet

Użyj alwaysShowLabel, aby określić, czy tekst ma być widoczny także na niewybranych kartach. Wyświetlanie wyłącznie etykiety aktywnej karty to często stosowany, przejrzysty wygląd.

alwaysShowLabel = false

Jedna reaktywna pętla

Połącz wszystko: odczytaj trasę raz, a następnie w forEach porównaj z nią każdą kartę. Wybór będzie teraz idealnie odzwierciedlać nawigację.

Szybkie sprawdzenie

Powiązano wybór ze stosem powrotu. Jedno krótkie pytanie.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Powiązano wyróżnienie ze stosem powrotu: odczytaj bieżącą trasę, porównaj ją dla każdej karty i nawiguj za pomocą launchSingleTop oraz popUpTo. Wybór zawsze odzwierciedla teraz rzeczywisty stan. 🎯

Bezpłatny start

Ucz się Kotlin dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 30
Lekcje: 120

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Wyróżnianie wybranej trasy” jest bezpłatna?

Tak — pełny tekst „Wyróżnianie wybranej trasy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wyróżnianie wybranej trasy”?

Synchronizuj wybór ze stosem wstecznym Ćwiczysz Jetpack Compose Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Jetpack Compose Academy?

Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Wyróżnianie wybranej trasy”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Jetpack Compose Academy?

Tak. Każda lekcja Jetpack Compose Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

NavigationBar z wieloma kartami
Wyróżnianie wybranej trasy
Zachowywanie stanu kart podczas przełączania
TabRow i strony przesuwane gestem

← Powrót do Jetpack Compose Academy