Android Academy · Oppitunti

Tilan julkaiseminen ViewModelista

Ohjatkaa Compose-käyttöliittymää ViewModelista.

Oppitunti 2/413 vaihetta

Tilan julkaiseminen ViewModelista 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.

Tilan tarjoaminen käyttöliittymälle

ViewModel sisältää tilan, mutta käyttöliittymä tarvitsee tavan tarkkailla tilaa ja piirtää itsensä uudelleen sen muuttuessa.

Modernissa Android-kehityksessä tähän käytetään kahta yleistä työkalua: StateFlow- ja Composen State-tyyppejä.

Muuttuvan ja muuttumattoman tilan malli

Hyvä käytäntö on pitää taustalla yksityinen muokattava ominaisuus ja tarjota ulospäin julkinen vain lukuun tarkoitettu versio.

Näin käyttöliittymä ei voi vahingossa muuttaa tilaa suoraan.

Tilan tarjoaminen StateFlowlla

Käyttäkää sisäisesti MutableStateFlow-tyyppiä ja tarjotkaa ulospäin vain lukuun tarkoitettu StateFlow.

class CounterViewModel : ViewModel() {
    private val _count = MutableStateFlow(0)
    val count: StateFlow<Int> = _count.asStateFlow()

    fun increment() {
        _count.value++
    }
}

StateFlow-tilan kerääminen Composessa

Composable muuntaa virtauksen Compose-tilaksi funktiolla collectAsState() tai elinkaaren huomioivalla muunnelmalla, jota käsitellään myöhemmin.

@Composable
fun CounterScreen(vm: CounterViewModel) {
    val count by vm.count.collectAsState()
    Text("Count: " + count)
}

Miksi StateFlow tarvitsee alkuarvon

StateFlow-oliolla on aina nykyinen arvo. Siksi sille on annettava alkuarvo luonnin yhteydessä.

Jokainen uusi kerääjä saa viimeisimmän arvon välittömästi, eikä virta ole koskaan tyhjä.

Vaihtoehto: Composen mutableStateOf

Yksinkertaisessa näyttökohtaisessa tilassa voitte käyttää ViewModelin sisällä myös Composen mutableStateOf-funktiota, jota Compose tarkkailee automaattisesti.

class CounterViewModel : ViewModel() {
    var count by mutableStateOf(0)
        private set

    fun increment() { count++ }
}

StateFlow ja Compose State

StateFlow kuuluu Kotlin-korutiineihin ja toimii kaikkialla, ei vain Composessa. Se sopii hyvin jaettuihin, elinkaaren huomioiviin virtoihin.
mutableStateOf on Composelle ominainen ja erittäin tiivis.

Laajemmissa sovelluksissa ViewModeleissa suositaan yleensä StateFlow-tyyppiä.

Näytön tilan mallintaminen yhtenä oliona

Sen sijaan, että käyttäisitte useita erillisiä virtoja, ryhmitelkää toisiinsa liittyvät kentät yhdeksi käyttöliittymän tilan dataluokaksi. Näin päivitykset ovat atomisia ja ennakoitavia.

data class ProfileUiState(
    val name: String = "",
    val isLoading: Boolean = false,
    val error: String? = null
)

Käyttöliittymän tilaolion tarjoaminen

Tarjotkaa yksi kyseisen tilaluokan StateFlow. Käyttöliittymä lukee kaiken yhdestä totuuden lähteestä.

private val _uiState = MutableStateFlow(ProfileUiState())
val uiState: StateFlow<ProfileUiState> =
    _uiState.asStateFlow()

Muuttumattoman tilan päivittäminen

Päivittäkää tila muodostamalla muuttuneet kentät sisältävä kopio sen sijaan, että muuttaisitte vanhaa objektia.

fun load() {
    _uiState.update { it.copy(isLoading = true) }
    // ... fetch, then:
    _uiState.update {
        it.copy(isLoading = false, name = "Ada")
    }
}

Tapahtumat kulkevat ylöspäin, tila alaspäin

Tämä on yksisuuntaisen tietovuon ydin:

Tila kulkee alaspäin ViewModelista käyttöliittymään.
Tapahtumat kulkevat ylöspäin käyttöliittymästä ViewModeliin funktiokutsujen kautta.

Pikatarkistus

Testatkaa ymmärrystänne tilan julkaisemisesta.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte seuraavat asiat:

Säilyttäkää yksityinen MutableStateFlow ja julkaiskaa vain luku -muotoinen StateFlow.
Ryhmitelkää toisiinsa liittyvät kentät käyttöliittymän tilan data classiin.
Päivittäkää tila copy()-funktiolla update {}-lohkon kautta.
Tila kulkee alaspäin ja tapahtumat ylöspäin.

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 ”Tilan julkaiseminen ViewModelista” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tilan julkaiseminen ViewModelista”. 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 ”Tilan julkaiseminen ViewModelista”?

Ohjatkaa Compose-käyttöliittymää ViewModelista. 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 ”Tilan julkaiseminen ViewModelista”-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