SwiftUI Academy · Les

Een tikkensteller bouwen

Werk de state bij bij elke tik en bekijk hoe de UI wordt vernieuwd.

Les 3 van 413 stappen

Een tikkensteller bouwen is een gratis SwiftUI Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject SwiftUI Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus SwiftUI Academy bevat in totaal 4 lessen.

Het doel: een live teller

Laten we een knop bouwen die je tikken telt en het totaal op het scherm toont. Dit is de klassieke eerste kennismaking met reactieve state. 👆

Begin met state

Begin met één eigenschap met @State om het oplopende totaal te bewaren. We noemen deze count en beginnen bij nul.

@State private var count = 0

De teller tonen

Toon de waarde met een Text-view. Dankzij stringinterpolatie weerspiegelt het label altijd de huidige count.

Text("Taps: \(count)")

Voeg de knop toe

Plaats een Button waarvan de actie count met één verhoogt. De closure wordt uitgevoerd elke keer dat je erop tikt.

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

Zet ze samen

Groepeer het label en de knop in een VStack, zodat ze netjes onder elkaar staan. Nu heb je een volledig klein scherm.

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

Bekijk de lus

Je tikt, count verandert, SwiftUI voert body opnieuw uit en de Text wordt bijgewerkt. Deze korte cyclus vormt het hart van elk reactief SwiftUI-scherm.

De volledige view

Hier is alles samengebracht: state, een label en een knop binnen één view.

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

Voeg een reset toe

Met een tweede knop kun je count terugzetten op nul. State resetten is gewoon een andere toewijzing en de gebruikersinterface volgt direct.

Button("Reset") { count = 0 }

Het label opmaken

Je kunt de tekst op basis van count in het enkelvoud of meervoud zetten of opmaken. Het label is een functie van state, dus alle logica die je toevoegt blijft gesynchroniseerd.

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

Ook verlagen

Voeg een minknop toe om af te tellen. Denk er wel aan de waarde logisch te houden, bijvoorbeeld door deze nooit onder nul te laten komen.

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

Geen handmatige vernieuwing

Merk op dat je nooit een vernieuwingsmethode aanroept. Alleen count wijzigen is voldoende; SwiftUI handelt het opnieuw tekenen elke keer voor je af.

Korte controle

Wat zorgt er in de tikteller voor dat de Text na een tik wordt bijgewerkt?

Beantwoord dit in de interactieve les

Samenvatting

Je hebt een tikteller gebouwd met één waarde met @State, een Text die deze leest en een Button die deze wijzigt. Verander de gegevens en de gebruikersinterface werkt zichzelf bij. 🎉

Gratis beginnen

Leer Swift met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 30
Lessen: 120

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Een tikkensteller bouwen” gratis?

Ja — de volledige tekst van “Een tikkensteller bouwen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus SwiftUI Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus SwiftUI Academy bevat in totaal 4 lessen.

Wat leer ik in “Een tikkensteller bouwen”?

Werk de state bij bij elke tik en bekijk hoe de UI wordt vernieuwd. Je oefent met SwiftUI Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met SwiftUI Academy te beginnen?

Ervaring vooraf is niet nodig. SwiftUI Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Een tikkensteller bouwen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over SwiftUI Academy?

Ja. Elke les over SwiftUI Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar SwiftUI Academy