Samenstellen met stapels en vormen

Bouwen met stapels en vormen

Samenstellen met stapels en vormen

Programmeer een zelfportret met behulp van stapels, vormen en modifiers.

Geschatte tijd voor het afronden van deze tutorial:

35 min.

SwiftUI-tools verkennen.

Gebruik de volgende tools om een zelfportret te maken.

Stapels en vormen gebruiken.

Gebruik een dieptestapel en voeg een vorm voor je hoofd toe.

Stap 1

Wijzig de VStack in een ZStack (dieptestapel).

Stap 2

Open de weergavenlijst en scrol tot onderaan waar de vormen capsule, cirkel, ellips, rechthoek en afgeronde rechthoek staan.

Stap 3

Voeg een vorm toe aan de ZStack voor je hoofd. Gebruik een RoundedRectangle (afgeronde rechthoek) voor een hoekig gezicht of een Capsule voor een ronder gezicht.

Tip

Afgeronde rechthoeken hebben een hoekradius nodig.

De grootte van een vorm aanpassen.

Gebruik de modifier kader om de grootte van een vorm op te geven.

Stap 1

Voeg een lege regel toe onder de capsule en open de lijst met modifiers.

Stap 2

Zoek naar ‘kader’ en tik erop om de modifier aan je code toe te voegen.

Stap 3

Vul de geschatte waarden voor hoogte en breedte in om je hoofd te creëren.

Kleur toevoegen.

Gebruik de modifier foregroundStyle (voorgrondstijl) om de vorm een kleur te geven.

Stap 1

Voeg een lege regel toe onder frame (kader) en open de lijst met modifiers.

Stap 2

Typ ‘Voorgrondstijl’ in de zoekbalk. Tik erop om deze aan je code toe te voegen.

Stap 3

Om de kleur te veranderen, selecteer je de code tussen de haakjes en open je de lijst met kleuren.

Stap 4

Tik op een kleur om die aan je code toe te voegen.

Tip

Je kunt ook je eigen kleur maken. Kies een van de codefragmenten en bewerk de waarden zodat ze overeenkomen met je huidskleur.

Een weergave verschuiven.

Voeg een nek toe en schuif die omlaag met behulp van afstand.

Stap 1

Gebruik wat je hebt geleerd om een rechthoek toe te voegen voor je nek en de grootte ervan aan te passen met een kader-modifier.

Stap 2

Voeg een lege regel toe onder de rechthoek en zoek vervolgens in de lijst met modifiers naar ‘afstand’.

Stap 3

Tik op offset (afstand) en bewerk de waarde om de vorm omlaag te schuiven. Parameters die je niet gebruikt, kun je eventueel verwijderen.

Stap 4

Plaats de nek onder het hoofd.

Selecteer de rechthoek en alle modifiers die je hebt toegevoegd. Knip de code en plak deze bovenaan de dieptestapel. Wijzig dan de kleur zodat die bij je hoofd past.

Stap 5

Gebruik wat je hebt geleerd om een shirt toe te voegen, dat op de juiste manier op het scherm te plaatsen en het een kleur te geven.

Een vorm inkorten.

Kort een vorm in om een pony of kort haar te maken.

Stap 1

Voeg een cirkel toe voor je haar. Gebruik kader om de cirkel ongeveer even breed of iets groter dan je hoofd te maken.

Stap 2

Voeg een lege regel toe onder de cirkel. Typ ‘.trim’ en tik op Return als het in de code-aanvulling wordt weergegeven.

Let op: de modifier trim (kort in) moet direct onder een vorm komen.

Stap 3

Experimenteer met waarden voor de plek waar het inkorten moet beginnen en eindigen.

Stap 4

Pas de plaats van de pony of het korte haar aan. Ga door met het toevoegen van eventuele andere elementen om je haar te voltooien.

Tip

Als een stapel meer dan tien weergaven heeft, krijg je een waarschuwing over ‘extra argumenten op positie…’.

Als dit gebeurt, groepeer je de elementen zoals je hier ziet.

Een schaduw toevoegen.

Gebruik een schaduw om je hoofd en nek te scheiden.

Stap 1

Zoek in de code naar de vorm die voor je hoofd wordt gebruikt. Voeg een lege regel toe onder de vorm en zoek dan in de lijst met modifiers naar ‘schaduw’.