SwiftUI Academy · Lektion

Bygga en tryckräknare

Uppdatera tillståndet vid tryck och se användargränssnittet uppdateras.

Lektion 3 av 413 steg

Bygga en tryckräknare är en gratis lektion i SwiftUI Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för SwiftUI Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.

Målet: en levande räknare

Vi ska bygga en knapp som räknar dina tryck och visar totalsumman på skärmen. Det är den klassiska första introduktionen till reaktivt state. 👆

Börja med state

Börja med en enda @State-egenskap som lagrar den löpande totalsumman. Vi kallar den count och börjar på noll.

@State private var count = 0

Visa antalet

Visa värdet med en Text-vy. Med stränginterpolation återspeglar etiketten alltid det aktuella värdet på count.

Text("Taps: \(count)")

Lägg till knappen

Placera en Button vars åtgärd ökar count med ett. Closure-blocket körs varje gång du trycker på den.

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

Stapla dem tillsammans

Gruppera etiketten och knappen i en VStack så att de placeras snyggt ovanför varandra. Nu har du en komplett liten skärm.

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

Följ loopen

Tryck, count ändras, SwiftUI kör body igen och Text uppdateras. Denna täta cykel är kärnan i varje reaktiv SwiftUI-skärm.

Hela vyn

Här är allt sammankopplat: state, en etikett och en knapp i samma vy.

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

Lägg till en återställning

En andra knapp kan sätta count till noll igen. Att återställa state är bara ännu en tilldelning, och gränssnittet följer efter direkt.

Button("Reset") { count = 0 }

Formatera etiketten

Du kan böja texten efter singular och plural eller formatera den baserat på count. Etiketten är en funktion av state, så all logik du lägger till hålls synkroniserad.

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

Räkna ned också

Lägg till en minusknapp för att räkna ned. Kom bara ihåg att hålla värdet rimligt, till exempel genom att aldrig låta det sjunka under noll.

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

Ingen manuell uppdatering

Observera att du aldrig anropar någon uppdateringsmetod. Det räcker att ändra count; SwiftUI hanterar omritningen åt dig varje gång.

Snabb kontroll

I tryckräknaren, vad gör att Text uppdateras efter ett tryck?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du byggde en tryckräknare med ett @State-värde, en Text som läser det och en Button som ändrar det. Ändra data så uppdateras gränssnittet av sig självt. 🎉

Gratis att börja

Lär dig Swift med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 30
Lektioner: 120

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Bygga en tryckräknare” gratis?

Ja – hela texten till ”Bygga en tryckräknare” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i SwiftUI Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Bygga en tryckräknare”?

Uppdatera tillståndet vid tryck och se användargränssnittet uppdateras. Ni övar på SwiftUI Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig SwiftUI Academy?

Du behöver inga förkunskaper. Utbildningen i SwiftUI Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Bygga en tryckräknare”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här SwiftUI Academy-lektionen?

Ja. Varje SwiftUI Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till SwiftUI Academy