SwiftUI Academy · Oppitunti

Näkymien sitominen ViewModeleihin

Ohjatkaa näkymää ViewModelin ominaisuuksilla.

Oppitunti 3/413 vaihetta

Näkymien sitominen ViewModeleihin on ilmainen SwiftUI Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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 SwiftUI Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. SwiftUI Academy-kurssilla on yhteensä 4 oppituntia.

ViewModelin omistaminen

ViewModelin luova näkymä omistaa sen. Käyttäkää @State-muuttujaa instanssin säilyttämiseen, jotta se säilyy näkymän uudelleenpiirrosten yli.

@State private var vm = ProfileViewModel()

Tilan lukeminen bodyssa

Lukekaa bodyssa ViewModelin ominaisuuksia tavallisten arvojen tapaan. SwiftUI suorittaa bodyn uudelleen aina, kun havaitut ominaisuudet muuttuvat.

Text(vm.greeting)

Toimintojen kutsuminen napautuksesta

Yhdistäkää painikkeen toiminto suoraan ViewModelin metodiin. Näkymä pysyy yksinkertaisena ja välittää vain intent-toiminnon aivoille.

Button("Reload") {
    vm.load()
}

Ehdollisen käyttöliittymän ohjaaminen

Antakaa ViewModelin tilan valita asettelu. Käyttäkää isLoading-arvoa switch-rakenteessa näyttääksenne latausilmaisimen tai sisällön ilman ylimääräistä näkymälogiikkaa.

if vm.isLoading {
    ProgressView()
} else {
    Text(vm.greeting)
}

Kaksisuuntaiset kentät

Tekstisyötettä varten sitokaa TextField dollarimerkin avulla ViewModelin ominaisuuteen. Muokkaukset siirtyvät heti takaisin ViewModeliin.

TextField("Name", text: $vm.name)

Lataaminen näkymän ilmestyessä

Kutsukaa ViewModelia .task-modifioijalla, kun näkymä tulee näkyviin, ja käynnistäkää ensimmäinen tietojen lataus automaattisesti.

.task {
    await vm.load()
}

Listat ViewModelista

Syöttäkää List-komponentille ViewModelin taulukko. Kun malli päivittää items-arvonsa, SwiftUI vertaa rivit ja animoi muutoksen puolestanne.

List(vm.items) { item in
    Text(item.title)
}

Näkymän pitäminen deklaratiivisena

Hyvin sidottu näkymä lukee kuin lause: näytä this-tila ja suorita tuo toiminto. bodyyn ei pääse livahtamaan laskentaa.

ViewModelin välittäminen alaspäin

Lapsinäkymät voivat vastaanottaa ViewModelin tavallisena ominaisuutena. Vanhempi omistaa sen, ja lapset vain lukevat sitä ja kutsuvat sen metodeja.

DetailView(vm: vm)

Esikatselut pitävät ViewModeleista

Antakaa esikatselussa näkymälle näyteaineistolla täytetty ViewModel. Voitte näyttää lataus-, tyhjän ja täydellisen tilan rinnakkain. 👀

Sidottu näyttö yhdellä silmäyksellä

Tämä näkymä omistaa ViewModelin, näyttää sen tervehdyksen ja lataa tiedot uudelleen napautuksesta – täydellinen sidonta vain muutamalla SwiftUI-rivillä.

Text(vm.greeting)
Button("Reload") { vm.load() }

Pikatarkistus

Miten näkymän pitäisi omistaa uusi ViewModel-instanssi?

Vastaa interaktiivisessa oppitunnissa

Kertaus: näkymien sitominen ViewModeleihin

Yhdistitte näkymän sen ViewModeliin @Statella, luitte sen ominaisuuksia bodyssa ja ohjasitte napautukset sekä syötteet takaisin sille. Seuraavaksi vuorossa on riippuvuuksien injektointi.

Aloita maksutta

Opi Swift 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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Näkymien sitominen ViewModeleihin” ilmainen?

Kyllä – oppitunnin ”Näkymien sitominen ViewModeleihin” 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 SwiftUI Academy-kurssin, päivitä CoddyKit PROhon. SwiftUI Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Näkymien sitominen ViewModeleihin”?

Ohjatkaa näkymää ViewModelin ominaisuuksilla. Harjoittelet SwiftUI Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni SwiftUI Academy-opiskelun?

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

Kuinka kauan ”Näkymien sitominen ViewModeleihin”-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ä SwiftUI Academy-oppitunnilla?

Kyllä. Jokainen SwiftUI 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: SwiftUI Academy