SwiftUI Academy · Les

Stroke, fill en overlay

Voorzie vormen van een omtrek en vulling voor badges en kaarten.

Les 4 van 413 stappen

Stroke, fill en overlay is een gratis SwiftUI Academy-les op CoddyKit. Dit is les 4 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.

Vulling versus rand

Je kunt een vorm aan de binnenkant inkleuren met fill of omlijnen met stroke. Samen kun je hiermee badges en kaarten maken.

Een vorm vullen

Gebruik fill om de volledige binnenkant van een vorm met een kleur of verloop te vullen. Dit is de meest gebruikte manier om een vorm in te kleuren. 🎨

Circle()
    .fill(.blue)

Omlijnen met stroke

De modifier stroke tekent alleen de rand van een vorm, zodat het midden leeg blijft. Perfect voor holle ringen en omtrekken.

Circle()
    .stroke(.blue)

De lijndikte instellen

Geef een lineWidth door aan stroke om de omtrek dikker of dunner te maken. Een groter getal zorgt voor een dikkere rand.

Circle()
    .stroke(.blue, lineWidth: 4)

Gestreepte randen

Gebruik een StrokeStyle met een streepjespatroon voor gestreepte omtrekken. Ideaal voor tijdelijke aanduidingen en neerzetvakken in je gebruikersinterface.

RoundedRectangle(cornerRadius: 12)
    .stroke(style: StrokeStyle(lineWidth: 2, dash: [6]))

Vulling en rand samen

Wil je zowel een vulling als een rand? Gebruik fill met een argument stroke om de binnenkant te vullen en de vorm in één aanroep te omlijnen.

Circle()
    .fill(.yellow)
    .stroke(.orange, lineWidth: 3)

Maak kennis met overlay

De modifier overlay legt een weergave boven op een andere. Gebruik deze om een rand, badge of pictogram boven op bestaande inhoud te plaatsen.

Randen via overlay

Een klassieke truc: vul een vorm en voeg daarna met overlay een kopie met een rand toe. Zo krijg je een nette gevulde kaart met een scherpe rand.

RoundedRectangle(cornerRadius: 12)
    .fill(.white)
    .overlay(
        RoundedRectangle(cornerRadius: 12)
            .stroke(.gray, lineWidth: 1))

Een pictogram bovenop leggen

Je kunt elke weergave bovenop een andere leggen, niet alleen vormen. Voeg een kleine badge of een pictogram toe aan een kaart om nieuwe of belangrijke items te benadrukken.

Circle()
    .fill(.blue)
    .overlay(Text("3").foregroundStyle(.white))

overlay versus background

Onthoud de lagen: overlay staat boven op een weergave, terwijl background erachter staat. Kies op basis van de kant waar je de decoratie wilt plaatsen.

Een badge maken

Combineer fill, stroke en overlay om verzorgde badges, avatars en kaarten te maken. Met deze drie hulpmiddelen kun je de meeste decoraties maken. ✨

Korte controle

Je wilt een omlijnde rand boven op een gevulde vorm leggen. Welke modifier plaatst een weergave bovenop?

Beantwoord dit in de interactieve les

Samenvatting: stroke, fill en overlay

Je hebt geleerd vormen te vullen met fill, ze te omlijnen met stroke en extra elementen met overlay erbovenop te leggen. Je kunt nu echte badges en kaarten maken!

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 “Stroke, fill en overlay” gratis?

Ja — de volledige tekst van “Stroke, fill en overlay” 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 “Stroke, fill en overlay”?

Voorzie vormen van een omtrek en vulling voor badges en kaarten. 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 4 van 4.

Hoe lang duurt de les “Stroke, fill en overlay”?

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