Zachowywanie stanu kart podczas przełączania
Zachowuj przewijanie i stan każdej karty
Zachowywanie stanu kart podczas przełączania to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 3 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.
Problem z utratą pozycji przewijania
Domyślnie opuszczenie karty i powrót do niej powoduje ponowne zbudowanie jej od początku, więc scroll position oraz wprowadzone dane znikają. Irytujące, prawda? 😅
Dlaczego tak się dzieje
Zwykłe navigate zastępuje miejsce docelowe, więc Compose zapomina poprzedni ekran. Aby zachować stan, trzeba poinstruować nawigację, by go save.
Zapisz stan przy opuszczaniu
Podczas usuwania starej karty ze stosu dodaj saveState, aby jej stan interfejsu został zapisany zamiast usunięty.
popUpTo(startRoute) {
saveState = true
}Przywróć stan przy powrocie
Podczas nawigowania do karty ustaw restoreState, aby wcześniej zapisany stan został przywrócony.
navController.navigate(tab.route) {
restoreState = true
}Połączenie trzech flag
Razem saveState, restoreState i launchSingleTop zapewniają klasyczne, płynne przełączanie kart, którego oczekują użytkownicy.
popUpTo(start) { saveState = true }
launchSingleTop = true
restoreState = truerememberSaveable też pomaga
Wartości wewnątrz ekranu, takie jak zawartość pól tekstowych, zachowuje rememberSaveable nawet po odtworzeniu ekranu, uzupełniając zapisywanie stanu nawigacji.
var query by rememberSaveable { mutableStateOf("") }Listy wymagają zapisanego przewijania
LazyColumn zachowuje pozycję przewijania, gdy używasz rememberLazyListState, a zapisany stan nawigacji pozwala zachować ją także po przełączeniu karty i powrocie.
val listState = rememberLazyListState()
LazyColumn(state = listState) { /* ... */ }Pilnuj trasy początkowej
Zawsze wykonuj popUpTo dla tego samego identyfikatora start destination, aby pakiety zapisanego stanu były przypisywane do właściwej karty.
popUpTo(navController.graph.findStartDestination().id)Sprawdź, przełączając karty
Przetestuj działanie: przewiń jedną kartę, przejdź do innej, a następnie wróć. Przy poprawnie ustawionych flagach scroll powinien znajdować się dokładnie w poprzednim miejscu.
Kiedy nie przywracać stanu
Czasami karta powinna odświeżać się przy wejściu, na przykład karta z kanałem aktualności. W takim przypadku po prostu skip restoreState dla tej trasy i pozwól jej się odbudować.
Stan wykraczający poza jeden ekran
Dane, które muszą przetrwać nawet przełączenie karty, przenieś do współdzielonego ViewModel, aby flagi nawigacji obsługiwały tylko interfejs, a nie właściwe dane.
Szybkie sprawdzenie
Nauczyłeś się utrzymywać aktualny stan każdej karty. Czas na sprawdzenie.
Podsumowanie
Karty zachowują teraz swój stan: saveState + restoreState + launchSingleTop utrzymują pozycję przewijania i wprowadzone dane, a rememberSaveable dodatkowo przechowuje wartości wewnątrz ekranu. Płynnie! ✨
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
Często zadawane pytania
Czy lekcja „Zachowywanie stanu kart podczas przełączania” jest bezpłatna?
Tak — pełny tekst „Zachowywanie stanu kart podczas przełączania” 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 „Zachowywanie stanu kart podczas przełączania”?
Zachowuj przewijanie i stan każdej karty Ć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 3 z 4.
Ile czasu zajmuje lekcja „Zachowywanie stanu kart podczas przełączania”?
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