Android Academy · Oppitunti

Lomakkeen tilan hallinta

Säilyttäkää ja päivittäkää kenttien arvoja tilan avulla.

Oppitunti 2/413 vaihetta

Lomakkeen tilan hallinta on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Android Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Android Academy-kurssilla on yhteensä 4 oppituntia.

Yhdestä kentästä lomakkeeksi

Yksi tekstikenttä on helppo toteuttaa. Oikeassa lomakkeessa kenttiä on useita: nimi, sähköpostiosoite, salasana ja ehkä valintaruutu. Tässä oppitunnissa opitte selkeät tavat koko lomakkeen tilan säilyttämiseen ja päivittämiseen Jetpack Composessa.

Kun tämä on kunnossa, validointi, lähettäminen ja esikatselut ovat kaikki helppoja toteuttaa.

Useita toisistaan riippumattomia tiloja

Yksinkertaisin tapa on käyttää yhtä mutableStateOf-tilaa kenttää kohden. Jokainen kenttä lukee ja päivittää omaa tilaansa.

Tämä sopii hyvin pienille lomakkeille, joissa on kaksi tai kolme kenttää.

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

Tilan kokoaminen data class -luokkaan

Lomakkeiden kasvaessa useat irralliset muuttujat muuttuvat helposti sekaviksi. Siistimpi vaihtoehto on mallintaa koko lomake yhtenä muuttumattomana data class -luokkana.

Säilytätte tilassa yhtä kyseisen olion sisältävää kokonaisuutta ja päivitätte sitä komennolla copy().

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

Päivittäminen copy()-komennolla

Koska tilaolio on muuttumaton, ette koskaan muokkaa sitä suoraan. Sen sijaan luotte uuden kopion, jossa yksi kenttä on muuttunut, ja sijoitatte kopion takaisin.

Näin Composen tilamalli pysyy ennakoitavana: uusi olio tarkoittaa uutta tilannevedosta, joka käynnistää uudelleenkoostamisen.

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

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

Täydellinen data-luokkamuoto

Tässä koko lomaketta ohjaa yksi SignUpState. Kukin kenttä päivittää yhden ominaisuuden copy()-funktion avulla.

Huomaatte, kuinka helppoa koko lomakkeen arvon lukeminen on milloin tahansa: se on yksinkertaisesti 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") }
    )
}

Valintaruudut ja kytkimet

Kaikki syöte ei ole tekstiä. Checkbox tai Switch toimii samalla tavalla: käytössä on totuusarvo ja onCheckedChange-takaisinkutsu.

Tallentakaa totuusarvo lomakkeen tilaan samalla tavalla kuin merkkijono.

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

Arvojen johtaminen tilasta

Yhden tilan lähteen suuri etu on se, että voitte laskea siitä asioita tallentamatta ylimääräisiä muuttujia. Voitte esimerkiksi päätellä, onko lomake valmis lähetettäväksi.

Käyttäkää derivedStateOf-funktiota (tai yksinkertaista lauseketta), jotta tulos päivittyy automaattisesti lomakkeen muuttuessa.

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

Määritysmuutoksista selviytyminen

remember säilyttää tilan uudelleenkoostamisten aikana, mutta tila menetetään määritysmuutoksessa, kuten näytön kääntyessä. Jos haluatte säilyttää yksinkertaiset arvot näytön kääntämisen yli, käyttäkää rememberSaveable-funktiota.

Se toimii suoraan primitiivityyppien ja Parcelable-tyyppien kanssa.

var email by rememberSaveable { mutableStateOf("") }

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

Lomakkeen tilan siirtäminen ViewModeliin

Jos lomake ei ole aivan yksinkertainen, säilyttäkää tila ViewModel-komponentissa. Se säilyy määritysmuutosten yli ja pitää käyttöliittymälogiikan erillään composablesta.

Composable lukee tilan ja välittää tapahtumat eteenpäin; ViewModel omistaa totuuden.

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

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

ViewModelin yhdistäminen

Hakekaa ViewModel composablessa ja sitokaa kukin kenttä sen tilaan ja käsittelijään. Käyttöliittymä pysyy kevyenä ja helposti testattavana.

Tämä on tuotantolomakkeiden suositeltu rakenne.

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

Puhdas Kotlin: copy() käytännössä

copy()-päivitysmalli on tavallista Kotlinin data-luokan toimintaa. Tässä se suoritetaan itsenäisesti, jotta näette, kuinka jokainen päivitys tuottaa täysin uuden olion.

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

Pikatarkistus

Mallinnatte lomakkeen muuttumattomana data class -luokkana, jota säilytetään tilassa. Miten yksittäinen kenttä pitäisi päivittää?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte hallitsemaan kokonaisten lomakkeiden tilaa:

Pienet lomakkeet: yksi mutableStateOf kenttää kohden.
Suuremmat lomakkeet: yksi muuttumaton data class, jota päivitetään copy()-funktiolla.
Totuusarvot ohjaavat Checkbox- ja Switch-komponentteja samalla tavalla kuin teksti tekstikenttiä.
Johtakaa esimerkiksi arvo ”voi lähettää” sen sijaan, että tallentaisitte sen.
Käyttäkää rememberSaveable-funktiota näytön kääntämistä varten ja ViewModel-komponenttia oikeissa näkymissä.

Seuraavaksi: syötteen tarkistaminen ja hyödyllisten virheilmoitusten näyttäminen.

Aloita maksutta

Opi Kotlin tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 36
Oppitunnit: 152

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Lomakkeen tilan hallinta” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Lomakkeen tilan hallinta”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Android Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Lomakkeen tilan hallinta”?

Säilyttäkää ja päivittäkää kenttien arvoja tilan avulla. Harjoittelet Android Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Android Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Android Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Lomakkeen tilan hallinta”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Android Academy-oppitunnilla?

Kyllä. Jokainen Android Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Android Academy