SwiftUI Academy · leksjon

Bygge en trykkteller

Oppdater tilstanden ved trykk, og se brukergrensesnittet oppdateres.

Leksjon 3 av 413 trinn

Bygge en trykkteller er en gratis leksjon i SwiftUI Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i SwiftUI Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i SwiftUI Academy inneholder totalt 4 leksjoner.

Målet: En levende teller

La oss bygge en knapp som teller trykkene dine og viser totalen på skjermen. Det er den klassiske første introduksjonen til reaktiv state. 👆

Start med state

Begynn med én @State-egenskap som holder den løpende totalen. Vi kaller den count og starter den på null.

@State private var count = 0

Vis antallet

Vis verdien med en Text-visning. Ved å bruke strenginterpolasjon gjenspeiler etiketten alltid gjeldende count.

Text("Taps: \(count)")

Legg til knappen

Plasser en Button der handlingen øker count med én. Closure-en kjøres hver gang du trykker på den.

Button("Tap me") {
    count += 1
}

Stable dem sammen

Gruppér etiketten og knappen i en VStack, slik at de ligger pent over hverandre. Nå har du en komplett liten skjerm.

VStack {
    Text("Taps: \(count)")
    Button("Tap me") { count += 1 }
}

Følg med på sløyfen

Trykk, count endres, SwiftUI kjører body på nytt, og Text oppdateres. Denne korte syklusen er kjernen i alle reaktive SwiftUI-skjermer.

Hele visningen

Her er alt koblet sammen: state, en etikett og en knapp i én visning.

struct CounterView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Taps: \(count)")
            Button("Tap me") { count += 1 }
        }
    }
}

Legg til en nullstilling

En knapp nummer to kan sette count tilbake til null. Å nullstille state er bare en ny tilordning, og brukergrensesnittet følger etter umiddelbart.

Button("Reset") { count = 0 }

Formater etiketten

Du kan bøye teksten i entall eller flertall, eller style den, basert på count. Etiketten er en funksjon av state, så all logikk du legger til, holder seg synkronisert.

Text(count == 1 ? "1 tap" : "\(count) taps")

Tell ned også

Legg til en minusknapp for å telle ned. Husk bare å holde verdien fornuftig, for eksempel ved å aldri la den falle under null.

Button("-") { if count > 0 { count -= 1 } }

Ingen manuell oppdatering

Legg merke til at du aldri kaller en oppdateringsmetode. Det holder å endre count; SwiftUI håndterer nytegningen for deg hver eneste gang.

Hurtigsjekk

I trykktelleren, hva gjør at Text oppdateres etter et trykk?

Besvar den i den interaktive leksjonen

Oppsummering

Du bygde en trykkteller med én @State-verdi, en Text som leser den, og en Button som endrer den. Endre dataene, så oppdateres brukergrensesnittet av seg selv. 🎉

Gratis å komme i gang

Lær deg Swift med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Bygge en trykkteller» gratis?

Ja – hele teksten i «Bygge en trykkteller» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av SwiftUI Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i SwiftUI Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Bygge en trykkteller»?

Oppdater tilstanden ved trykk, og se brukergrensesnittet oppdateres. Du øver på SwiftUI Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med SwiftUI Academy?

Ingen tidligere erfaring er nødvendig. SwiftUI Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Bygge en trykkteller»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne SwiftUI Academy-leksjonen?

Ja. Alle SwiftUI Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til SwiftUI Academy