Bevar fanetilstand ved skift
Bevar hver fans scrolling og state.
Bevar fanetilstand ved skift er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Problemet med den forsvundne rulleposition
Som standard genopbygges en fane fra bunden, når du forlader den og vender tilbage, så din rulleposition og dine input forsvinder. Irriterende, ikke? 😅
Hvorfor det sker
En almindelig navigate erstatter destinationen, så Compose glemmer den gamle skærm. Hvis tilstanden skal bevares, skal du i stedet fortælle navigationen, at den skal gemme den.
Gem på vej ud
Når du fjerner den gamle fane, skal du tilføje saveState, så dens brugergrænsefladetilstand gemmes i stedet for at blive kasseret.
popUpTo(startRoute) {
saveState = true
}Gendan på vej ind
Når du navigerer til fanen, skal du angive restoreState, så dens tidligere gemte tilstand kommer tilbage med det samme.
navController.navigate(tab.route) {
restoreState = true
}Kombinationen af de tre flag
Sammen giver saveState, restoreState og launchSingleTop den klassiske, glidende skift mellem faner, som brugere forventer.
popUpTo(start) { saveState = true }
launchSingleTop = true
restoreState = truerememberSaveable hjælper også
For værdier inde på en skærm holder rememberSaveable ting som tekstfelter i live under genoprettelse og supplerer lagringen af navigationstilstanden.
var query by rememberSaveable { mutableStateOf("") }Lister kræver gemt rulleposition
En LazyColumn bevarer sin rulleposition, når du bruger rememberLazyListState, og den gemte navigationstilstand sørger for, at den overlever en tur væk fra og tilbage til fanen.
val listState = rememberLazyListState()
LazyColumn(state = listState) { /* ... */ }Hold øje med startruten
Brug altid den samme id-værdi for startdestinationen i popUpTo, så pakkerne med gemt tilstand knyttes til den rigtige fane igen.
popUpTo(navController.graph.findStartDestination().id)Kontrollér ved at skifte
Test det: rul i én fane, gå til en anden, og vend derefter tilbage. Når flagene er angivet, bør rullepositionen være præcis, hvor du forlod den.
Hvornår tilstanden ikke skal gendannes
Nogle gange skal en fane opdateres, når du åbner den, for eksempel et feed. Så skal du blot springe restoreState over for den rute og lade fanen blive bygget igen.
Tilstand, der rækker ud over én skærm
For data, der skal overleve selve fanen, skal du flytte dem til en delt ViewModel, så navigationsflagene kun håndterer brugergrænsefladen og ikke dine egentlige data.
Hurtigt tjek
Du har lært at holde hver fane frisk. Det er tid til et tjek.
Opsummering
Du har gjort fanerne vedvarende: saveState + restoreState + launchSingleTop bevarer rulleposition og input, mens rememberSaveable sikrer værdier inde på skærmen. Glat! ✨
Lær Kotlin med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Bevar fanetilstand ved skift” gratis?
Ja — hele teksten til “Bevar fanetilstand ved skift” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Bevar fanetilstand ved skift”?
Bevar hver fans scrolling og state. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Jetpack Compose Academy?
Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Bevar fanetilstand ved skift”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?
Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- NavigationBar med flere faner
- Fremhævning af den valgte route
- Bevar fanetilstand ved skift
- TabRow og swipeable sider