Jetpack Compose Academy · Oppitunti

viewModel() Composablessa

Hankkikaa ja rajatkaa ViewModel oikein.

Oppitunti 2/413 vaihetta

viewModel() Composablessa on ilmainen Jetpack Compose Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Jetpack Compose Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.

ViewModelin hankkiminen

Composable-komponentin sisällä ViewModelia ei luoda new-avainsanalla. Sen sijaan kutsutte viewModel()-funktiota oikean instanssin hakemiseksi.

val vm: CounterViewModel = viewModel()

Mistä se tulee

viewModel()-apuohjelma etsii lähimmän elinkaaren omistajan ja palauttaa siihen sidotun ViewModelin. Se luo uuden vain, jos sopivaa instanssia ei vielä ole.

Sama instanssi uudelleenkoostossa

Uudelleenkoostaminen suorittaa funktion monta kertaa, mutta viewModel() palauttaa joka kerta saman instanssin, joten tila ei nollaudu odottamatta.

Tilan lukeminen siitä

Kun ViewModel on hallussanne, lukekaa sen havaittavaa tilaa, niin Composable piirtyy uudelleen aina tilan muuttuessa. Käyttöliittymä seuraa dataa. 🔗

val vm: CounterViewModel = viewModel()
Text("Count: " + vm.count)

Sen funktioiden kutsuminen

Välittäkää käyttäjän toiminnot ViewModelille kutsumalla sen funktioita tapahtumalambdoista. Näin päätöksentekologiikka pysyy poissa Composable-komponentista.

Button(onClick = { vm.increment() }) {
    Text("Add")
}

Tuonti

Funktio tulee lifecycle Compose -artefaktista. Tuokaa androidx.lifecycle.viewmodel.compose.viewModel käyttöön import-lauseella.

import androidx.lifecycle.viewmodel.compose.viewModel

Oletusarvoinen rajaus

Oletusarvoisesti ViewModel on rajattu isäntä-Activityyn tai navigointikohteeseen, joten kaikki kyseisen rajauksen Composable-komponentit jakavat saman instanssin. 🎯

Konstruktorin argumentit

Tarvitsetteko riippuvuuksien välittämistä? Antakaa factory, jotta kehys tietää, miten konstruktoriparametreja sisältävä ViewModel rakennetaan.

val vm: CartViewModel = viewModel(factory = CartFactory(repo))

Nostakaa, älkää välittäkö alaspäin

Kutsukaa viewModel()-funktiota ylempänä, lähellä näytön juurta, ja välittäkää sitten alaspäin pelkkä tila sekä takaisinkutsut, jotta lapsen Composable-komponentit pysyvät uudelleenkäytettävinä.

Preview-ystävällinen suunnittelu

Koska viewModel() tarvitsee todellisen omistajan, suunnitelkaa lapset vastaanottamaan yksinkertaisia parametreja, jotta ne piirtyvät edelleen eristetyssä @Preview-esikatselussa.

Nopea malli

Yleinen työnkulku on yksinkertainen: hankkikaa ViewModel, lukekaa sen tila ja välittäkää tapahtumat sen funktioille. Kolme vaihetta jokaiselle näytölle. ✨

Pikatarkistus

Tarkistakaa, miten hankitte ViewModelin Composable-komponentista.

Kertaus

Kutsukaa viewModel()-funktiota rajatun ViewModelin hakemiseksi, ohjatkaa käyttöliittymää lukemalla sen tilaa ja välittäkää käyttäjän tapahtumat sen funktioille sen sijaan, että loisit ViewModelin itse.

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
30
Oppitunnit
120

Usein kysytyt kysymykset

Onko oppitunti ”viewModel() Composablessa” ilmainen?

Kyllä – oppitunnin ”viewModel() Composablessa” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Jetpack Compose Academy-kurssin, päivitä CoddyKit PROhon. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”viewModel() Composablessa”?

Hankkikaa ja rajatkaa ViewModel oikein. Harjoittelet Jetpack Compose Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Jetpack Compose Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Jetpack Compose 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 ”viewModel() Composablessa”-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ä Jetpack Compose Academy-oppitunnilla?

Kyllä. Jokainen Jetpack Compose 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

  1. Miksi ViewModel säilyy kierron yli
  2. viewModel() Composablessa
  3. UiState-dataluokan mallintaminen
  4. collectAsStateWithLifecycle
← Takaisin: Jetpack Compose Academy