Android Academy · Lektion

Formularstatus verwalten

Feldwerte mit State speichern und aktualisieren

Formularstatus verwalten ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Vom einzelnen Feld zum Formular

Ein einzelnes Textfeld ist einfach. Ein echtes Formular enthält mehrere: Name, E-Mail, Passwort und vielleicht eine Checkbox. In dieser Lektion lernen Sie saubere Möglichkeiten kennen, den State eines gesamten Formulars in Jetpack Compose zu speichern und zu aktualisieren.

Wenn Sie das richtig umsetzen, werden Validierung, Übermittlung und Previews ganz einfach.

Mehrere unabhängige States

Der einfachste Ansatz ist ein mutableStateOf pro Feld. Jedes Feld liest seinen eigenen Teil des States und aktualisiert ihn.

Für kleine Formulare mit zwei oder drei Feldern ist das vollkommen in Ordnung.

@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") })
    }
}

State in einer Data Class gruppieren

Wenn Formulare wachsen, werden viele einzelne Variablen schnell unübersichtlich. Eine sauberere Möglichkeit besteht darin, das gesamte Formular als unveränderliche data class zu modellieren.

Sie halten ein einziges State-Element mit diesem Objekt und aktualisieren es mit copy().

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

Mit copy() aktualisieren

Da das State-Objekt unveränderlich ist, verändern Sie es nie direkt. Stattdessen erstellen Sie eine neue Kopie, in der ein Feld geändert wurde, und weisen sie wieder zu.

Dadurch bleibt das State-Modell von Compose vorhersehbar: Ein neues Objekt bedeutet einen neuen Snapshot und löst eine Neuzusammensetzung aus.

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

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

Eine vollständige Data-Class-Form

Hier wird das gesamte Formular von einem einzigen SignUpState gesteuert. Jedes Feld aktualisiert über copy() eine einzelne Eigenschaft.

Beachten Sie, wie einfach sich der gesamte Wert des Formulars jederzeit auslesen lässt: Er ist einfach 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") }
    )
}

Checkboxen und Schalter

Nicht jede Eingabe ist Text. Ein Checkbox oder Switch funktioniert auf dieselbe Weise: mit einem booleschen Wert und einem onCheckedChange-Callback.

Speichern Sie den booleschen Wert genauso wie einen String in Ihrem Formularzustand.

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")
}

Werte aus dem Zustand ableiten

Ein großer Vorteil eines zentralen Zustands: Sie können daraus Werte berechnen, ohne zusätzliche Variablen zu speichern. Zum Beispiel, ob das Formular zum Absenden bereit ist.

Verwenden Sie derivedStateOf (oder einen einfachen Ausdruck), damit das Ergebnis automatisch aktualisiert wird, sobald sich das Formular ändert.

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")
}

Konfigurationsänderungen überstehen

remember bewahrt den Zustand über Recompositions hinweg, aber bei einer Konfigurationsänderung wie einer Bildschirmdrehung geht er verloren. Verwenden Sie rememberSaveable, um einfache Werte über eine Drehung hinweg zu erhalten.

Primitive Typen und Parcelable-Typen werden standardmäßig unterstützt.

var email by rememberSaveable { mutableStateOf("") }

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

Formularzustand in ein ViewModel auslagern

Bei allem, was über ein triviales Formular hinausgeht, sollten Sie den Zustand in einem ViewModel halten. Er übersteht Konfigurationsänderungen und hält die UI-Logik aus dem Composable heraus.

Das Composable liest den Zustand und leitet Ereignisse weiter; das ViewModel ist die maßgebliche Quelle.

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

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

Das ViewModel verbinden

Rufen Sie im Composable das ViewModel ab und verknüpfen Sie jedes Feld mit seinem Zustand und Handler. Die UI bleibt schlank und testbar.

Dies ist die empfohlene Struktur für Formulare in Produktionsanwendungen.

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

Reines Kotlin: copy() in Aktion

Das Aktualisierungsmuster mit copy() ist einfach das standardmäßige Verhalten von Kotlin-Data-Class. Hier läuft es eigenständig, damit Sie sehen können, wie jede Aktualisierung ein vollständig neues Objekt erzeugt.

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)
}

Kurze Überprüfung

Sie modellieren Ihr Formular als unveränderliche data class, die im Zustand gehalten wird. Wie sollten Sie ein einzelnes Feld aktualisieren?

Zusammenfassung

Sie haben gelernt, wie Sie den Zustand ganzer Formulare verwalten:

Kleine Formulare: ein mutableStateOf pro Feld.
Größere Formulare: eine einzelne unveränderliche data class, die mit copy() aktualisiert wird.
Boolesche Werte steuern Checkbox und Switch genauso, wie Textwerte Textfelder steuern.
Leiten Sie Werte wie „kann abgesendet werden“ ab, statt sie zu speichern.
Verwenden Sie rememberSaveable für Drehungen und ein ViewModel für echte Bildschirme.

Als Nächstes: Eingaben validieren und hilfreiche Fehler anzeigen.

Häufig gestellte Fragen

Ist die Lektion „Formularstatus verwalten“ kostenlos?

Ja — der vollständige Text von „Formularstatus verwalten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Formularstatus verwalten“?

Feldwerte mit State speichern und aktualisieren Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Formularstatus verwalten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Android Academy