Android Academy · Lekcja

Zarządzanie stanem formularza

Przechowuj i aktualizuj wartości pól za pomocą stanu

Lekcja 2 z 413 kroki

Zarządzanie stanem formularza to bezpłatna lekcja Android 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 Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Od jednego pola do formularza

Pojedyncze pole tekstowe jest proste. Rzeczywisty formularz zawiera ich kilka: imię i nazwisko, adres e-mail, hasło, a być może także pole wyboru. W tej lekcji dowie się Pan/Pani, jak w przejrzysty sposób przechowywać i aktualizować stan całego formularza w Jetpack Compose.

Gdy zostanie to poprawnie zorganizowane, walidacja, wysyłanie formularza i podglądy stają się proste.

Kilka niezależnych stanów

Najprostsze podejście polega na użyciu jednego mutableStateOf dla każdego pola. Każde pole odczytuje i aktualizuje własny fragment stanu.

To dobre rozwiązanie w przypadku małych formularzy zawierających dwa lub trzy pola.

@Composable
fun LoginForm() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column {
        OutlinedTextField(email, { email = it }, label = { Text("Email") })
        OutlinedTextField(password, { password = it }, label = { Text("Password") })
    }
}

Grupowanie stanu w klasie danych

Wraz z rozrostem formularzy wiele luźnych zmiennych staje się nieporęcznych. Lepszym rozwiązaniem jest odwzorowanie całego formularza jako jednej niezmiennej data class.

Przechowuje się wtedy jeden fragment stanu zawierający ten obiekt, a aktualizuje go za pomocą copy().

data class SignUpState(
    val name: String = "",
    val email: String = "",
    val agreedToTerms: Boolean = false
)

Aktualizowanie za pomocą copy()

Ponieważ obiekt stanu jest niezmienny, nigdy nie modyfikuje się go bezpośrednio. Zamiast tego tworzy się nową kopię ze zmienionym jednym polem i przypisuje ją z powrotem.

Dzięki temu model stanu Compose pozostaje przewidywalny: nowy obiekt oznacza nowy snapshot, który wywołuje rekompozycję.

var form by remember { mutableStateOf(SignUpState()) }

OutlinedTextField(
    value = form.name,
    onValueChange = { form = form.copy(name = it) },
    label = { Text("Name") }
)

Pełna postać klasy danych

W tym przypadku cały formularz jest oparty na jednym obiekcie SignUpState. Każde pole aktualizuje jedną właściwość za pomocą copy().

Zauważ, jak łatwo w dowolnym momencie odczytać wartość całego formularza: wystarczy użyć form.

var form by remember { mutableStateOf(SignUpState()) }

Column {
    OutlinedTextField(
        value = form.name,
        onValueChange = { form = form.copy(name = it) },
        label = { Text("Name") }
    )
    OutlinedTextField(
        value = form.email,
        onValueChange = { form = form.copy(email = it) },
        label = { Text("Email") }
    )
}

Pola wyboru i przełączniki

Nie wszystkie dane wejściowe są tekstowe. Element Checkbox lub Switch działa tak samo: korzysta z wartości logicznej i wywołania zwrotnego onCheckedChange.

Wartość logiczną należy przechowywać w stanie formularza tak samo jak ciąg znaków.

var form by remember { mutableStateOf(SignUpState()) }

Row(verticalAlignment = Alignment.CenterVertically) {
    Checkbox(
        checked = form.agreedToTerms,
        onCheckedChange = { form = form.copy(agreedToTerms = it) }
    )
    Text("I agree to the terms")
}

Wyprowadzanie wartości ze stanu

Jedną z największych zalet stanu będącego pojedynczym źródłem prawdy jest możliwość obliczania na jego podstawie różnych wartości bez przechowywania dodatkowych zmiennych. Można na przykład obliczyć, czy formularz jest gotowy do wysłania.

Proszę użyć derivedStateOf lub prostego wyrażenia, aby wynik aktualizował się automatycznie wraz ze zmianami formularza.

var form by remember { mutableStateOf(SignUpState()) }

val canSubmit by remember {
    derivedStateOf {
        form.name.isNotBlank() &&
        form.email.isNotBlank() &&
        form.agreedToTerms
    }
}

Button(onClick = { /* submit */ }, enabled = canSubmit) {
    Text("Sign Up")
}

Zachowywanie stanu przy zmianach konfiguracji

remember zachowuje stan podczas rekompozycji, ale stan ten jest tracony przy zmianie konfiguracji, na przykład po obróceniu ekranu. Aby zachować proste wartości po obrocie, należy użyć rememberSaveable.

Domyślnie działa ono z typami prostymi i typami Parcelable.

var email by rememberSaveable { mutableStateOf("") }

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") }
)

Przenoszenie stanu formularza do ViewModel

W przypadku formularzy wykraczających poza trywialne przykłady stan należy przechowywać w obiekcie ViewModel. Przetrwa on zmiany konfiguracji i pozwoli oddzielić logikę interfejsu od komponentu composable.

Komponent composable odczytuje stan i przekazuje zdarzenia, a ViewModel jest właścicielem źródła prawdy.

class SignUpViewModel : ViewModel() {
    var state by mutableStateOf(SignUpState())
        private set

    fun onNameChange(value: String) {
        state = state.copy(name = value)
    }
}

Podłączanie ViewModel

W komponencie composable należy pobrać ViewModel i powiązać każde pole z jego stanem oraz funkcją obsługi. Dzięki temu interfejs pozostaje prosty i łatwy do testowania.

Jest to zalecana struktura formularzy produkcyjnych.

@Composable
fun SignUpScreen(vm: SignUpViewModel = viewModel()) {
    OutlinedTextField(
        value = vm.state.name,
        onValueChange = vm::onNameChange,
        label = { Text("Name") }
    )
}

Czysty Kotlin: <code>copy()</code> w praktyce

Wzorzec aktualizacji za pomocą copy() to po prostu standardowe działanie klas danych w Kotlinie. Tutaj działa on samodzielnie, dzięki czemu można zobaczyć, jak każda aktualizacja tworzy zupełnie nowy obiekt.

data class SignUpState(
    val name: String = "",
    val email: String = ""
)

fun main() {
    var state = SignUpState()
    state = state.copy(name = "Ada")
    state = state.copy(email = "ada@dev.io")
    println(state)
}

Szybkie sprawdzenie

Modelują Państwo formularz jako niezmienną klasę data class przechowywaną w stanie. Jak należy zaktualizować pojedyncze pole?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Dowiedzieli się Państwo, jak zarządzać stanem całych formularzy:

Małe formularze: osobny element mutableStateOf dla każdego pola.
Większe formularze: pojedyncza niezmienna klasa data class, aktualizowana za pomocą copy().
Wartości logiczne sterują elementami Checkbox i Switch tak samo, jak tekst steruje polami.
Należy wyprowadzać wartości, takie jak „można wysłać”, zamiast je przechowywać.
Do zachowania stanu po obrocie należy użyć rememberSaveable, a na rzeczywistych ekranach — ViewModel.

Następnie: walidowanie danych wejściowych i wyświetlanie pomocnych komunikatów o błędach.

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: 36
Lekcje: 152

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

Często zadawane pytania

Czy lekcja „Zarządzanie stanem formularza” jest bezpłatna?

Tak — pełny tekst „Zarządzanie stanem formularza” 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 Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zarządzanie stanem formularza”?

Przechowuj i aktualizuj wartości pól za pomocą stanu Ćwiczysz Android 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ąć Android Academy?

Nie wymagamy żadnego doświadczenia. Android 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 „Zarządzanie stanem formularza”?

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 Android Academy?

Tak. Każda lekcja Android 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

TextField i dane wprowadzane przez użytkownika
Zarządzanie stanem formularza
Walidacja danych wejściowych
Opcje i działania klawiatury

← Powrót do Android Academy