SwiftUI Academy · Les

Padding rond views toevoegen

Gebruik padding om ruimte rondom elementen te creëren.

Les 1 van 413 stappen

Padding rond views toevoegen is een gratis SwiftUI Academy-les op CoddyKit. Dit is les 1 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.

Waarom weergaven krap aanvoelen

Standaard zit een SwiftUI-weergave strak tegen aangrenzende weergaven en de schermrand. Padding is de ademruimte die je toevoegt, zodat inhoud nooit benauwd aanvoelt.

Maak kennis met de padding-modifier

De padding-modifier voegt ruimte aan de buitenkant van een weergave toe. Koppel hem net als elke andere modifier en SwiftUI vergroot de omvang van de weergave om ruimte te maken.

Text("Hello")
    .padding()

De standaardhoeveelheid

Als je padding() zonder waarde aanroept, wordt een systeemstandaard gebruikt die zich aan het platform aanpast, meestal ongeveer 16 punten. Dit is een veilige, consistente beginwaarde.

Een exacte hoeveelheid instellen

Geef een getal door om de tussenruimte precies te bepalen. Hier voegt padding(40) aan elke kant van de tekst 40 punten ruimte toe.

Text("Spaced")
    .padding(40)

Padding aan één rand

Je kunt één rand selecteren in plaats van alle vier. Hiermee voeg je alleen bovenaan 30 punten toe, terwijl de andere kanten ongewijzigd blijven.

Text("Top gap")
    .padding(.top, 30)

Horizontaal en verticaal

De randsets .horizontal en .vertical zijn handige snelkoppelingen. Hiermee voeg je met één duidelijke aanroep tegelijk padding aan de linker- en rechterkant toe.

Text("Sides")
    .padding(.horizontal, 24)

Randsets combineren

Stapel twee aanroepen van padding om per richting verschillende hoeveelheden te gebruiken. Hier krijgt de weergave brede horizontale marges en een kleinere verticale tussenruimte.

Text("Mixed")
    .padding(.horizontal, 32)
    .padding(.vertical, 8)

De volgorde is belangrijk

Modifiers worden in volgorde naar buiten toe toegepast, dus de plaats van padding verandert het resultaat. Padding vóór een achtergrond duwt de kleur samen met de inhoud naar buiten.

Text("Hi")
    .padding()
    .background(.yellow)

Eerst padding, dan background

Verwissel de volgorde en het verschil is duidelijk: als je eerst een background toepast en daarna padding, blijft de kleur strak om de tekst zitten met lege ruimte eromheen.

Text("Hi")
    .background(.yellow)
    .padding()

Padding op containers

Padding werkt op stacks en elke andere weergave, niet alleen op tekst. Wikkel een VStack en geef die padding om de hele groep vanaf de schermranden naar binnen te duwen.

VStack {
    Text("Line one")
    Text("Line two")
}
.padding()

Padding tegenover marges

SwiftUI heeft geen afzonderlijk concept voor marges. Padding is je enige hulpmiddel voor tussenruimte en door het te koppelen krijg je volledige controle over elke rand.

Korte controle

Test hoe goed je de padding-modifier beheerst.

Beantwoord dit in de interactieve les

Samenvatting

Goed gedaan! Je hebt geleerd dat padding ademruimte buiten een weergave toevoegt, met standaardwaarden, exacte hoeveelheden, specifieke randen en een volgorde die de achtergronden bepaalt.

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 “Padding rond views toevoegen” gratis?

Ja — de volledige tekst van “Padding rond views toevoegen” 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 “Padding rond views toevoegen”?

Gebruik padding om ruimte rondom elementen te creëren. 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 1 van 4.

Hoe lang duurt de les “Padding rond views toevoegen”?

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