Podnoszenie stanu za pomocą value i onValueChange
Przekazuj stan w dół, a zdarzenia w górę
Podnoszenie stanu za pomocą value i onValueChange 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.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
State Hoisting in One Line
State hoisting means moving state out of a Composable up to its caller. The component becomes stateless and the parent stays in charge.
The Core Pattern
Replace internal state with two parameters: a value to display and an onValueChange callback to report changes.
fun NameField(value: String, onValueChange: (String) -> Unit) {
TextField(value = value, onValueChange = onValueChange)
}State Down, Events Up
Data flows down through value; user actions flow up through onValueChange. This one-way loop is called unidirectional data flow. ↕️
Who Owns the State Now
The parent owns the state with remember and passes it in. The child never stores it, so two callers can drive the same component differently.
var name by remember { mutableStateOf("") }
NameField(value = name, onValueChange = { name = it })value: The Read Side
The value parameter is what the component shows right now. It is read-only to the child; the child never edits it directly.
onValueChange: The Write Side
When the user types, the child calls onValueChange(newText). The parent decides whether and how to update its state.
Why Not Edit In Place
A stateless child cannot just reassign value, it is only an input. Reporting the change upward keeps a single owner in control.
Controlled Components
This is a controlled component: the parent fully decides what shows. You can transform, ignore, or validate input before storing it.
NameField(value = name, onValueChange = { name = it.uppercase() })Reusing the Same Field
Because the field is hoisted, you can drop it into a login screen, a search bar, or a settings page, each with its own owning state.
Hoisting Beyond Text
The pattern fits any state: a checked Boolean with onCheckedChange, a selected item with onSelect. Same idea, different names.
fun ToggleRow(checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
Switch(checked = checked, onCheckedChange = onCheckedChange)
}A Simple Rule
Hoist state to the lowest common parent that needs to read or change it, no higher. That keeps ownership clear and code clean.
Quick Check
In the hoisting pattern, what does the child do when the user types?
Recap
Hoisting swaps internal state for value plus onValueChange. State flows down, events flow up, and the parent stays in charge. 🚀
Często zadawane pytania
Czy lekcja „Podnoszenie stanu za pomocą value i onValueChange” jest bezpłatna?
Tak — pełny tekst „Podnoszenie stanu za pomocą value i onValueChange” 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 „Podnoszenie stanu za pomocą value i onValueChange”?
Przekazuj stan w dół, a zdarzenia w górę Ć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 „Podnoszenie stanu za pomocą value i onValueChange”?
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
- Stanowe i bezstanowe funkcje Composable
- Podnoszenie stanu za pomocą value i onValueChange
- Jedno źródło prawdy
- Sloty stanu Compose i lambdy zawartości