Bygg med travar och former
Sammanställ med travar och former
Koda ett självporträtt med travar, former och modifierare.
Beräknad tidsåtgång för den här handledningen:
35 min
Utforska SwiftUI-verktyg.
Använd de här verktygen för att skapa ett självporträtt.
Använd travar och former.
Använd en djuptrave och lägg till en form för ditt huvud.
Steg 1
Ändra VStack till ZStack (djuptrave).
Steg 2
Öppna listan med vyer och skrolla till slutet. Där finns formerna kapsel, cirkel, ellips, rektangel och rundad rektangel.
Steg 3
Lägg till en form i ZStack för ditt huvud. Använd Rundad rektangel för ett fyrkantigt ansikte eller Kapsel för ett rundare ansikte.
Tips
Rundade rektanglar kräver en hörnradie.
Justera storleken på en form.
Använd modifieraren Ram för att ange storlek eller form.
Steg 1
Lägg till en tom rad under kapseln och öppna listan med modifierare.
Steg 2
Sök efter Ram och tryck för att lägga till den i din kod.
Steg 3
Skriv in de ungefärliga värdena för höjd och bredd för att skapa ditt huvud.
Lägg till färger.
Använd modifieraren Förgrundsstil för att ge din form en färg.
Steg 1
Lägg till en tom rad under ramen och öppna listan med modifierare.
Steg 2
Skriv Förgrundsstil i sökfältet. Tryck på den för att lägga till den i din kod.
Steg 3
Ändra färg genom att markera koden som står inom parentes och öppna listan med färger.
Steg 4
Tryck på en färg för att lägga till den i din kod.
Tips
Du kan även välja att skapa din egen färg. Markera någon av kodsnuttarna och ändra värdena tills de överensstämmer med din hudfärg.
Flytta en vy.
Skapa en hals och flytta den nedåt med Förskjutning.
Steg 1
Använd dina nya kunskaper genom att lägga till en rektangel för halsen och justera storleken med modifieraren Ram.
Steg 2
Lägg till en tom rad under rektangeln och sök efter Förskjutning i listan med modifierare.
Steg 3
Tryck på Förskjutning och ändra värdet för att flytta formen nedåt. Du kan även radera parametrar som du inte använder.
Steg 4
Flytta halsen under ansiktet.
Markera rektangeln och alla modifierare som du har lagt till. Kopiera och klistra in koden ovanför djuptraven. Ändra sedan färgen så att den är likadan som för ditt huvud.
Steg 5
Använd dina nya kunskaper för att lägga till en tröja, placera den korrekt på skärmen och färglägga den.
Putsa en form.
Putsa en form för att skapa en lugg eller kort hår.
Steg 1
Lägg till en cirkel för ditt hår. Använd Ram för att ändra den till ungefär samma bredd som ditt huvud eller något större.
Steg 2
Lägg till en tom rad under cirkeln. Skriv .trim och tryck på returknappen när texten dyker upp i koden.
Tänk på att putsningsmodifieraren trim måste stå direkt under en form.
Steg 3
Experimentera med värden för att se var putsningen ska börja och sluta.
Steg 4
Justera platsen för lugg eller kort hår. Fortsätt att lägga till andra delar för att göra klart håret.
Tips
En varning visas om du har fler än tio vyer i en trave.
Gruppera i så fall delarna som på bilden.
Lägg till en skugga.
Markera mellanrummet mellan hals och huvud genom att lägga till en skugga.
Steg 1
Leta rätt på formen som du använde till huvudet i koden. Lägg till en tom rad under formen och sök efter Skugga i listan med modifierare.
Steg 2
Ändra skuggans radie. Experimentera med olika värden och se hur det ser ut.
Tips
Du kan även ge skuggan en färg.
Lägg på en bakgrundsfärg.
Ge ditt självporträtt en bakgrundsfärg.
Steg 1
Lägg till en tom rad längst upp i din ZStack och öppna listan med färger. Tryck på en färg för att lägga till den i din kod.
Tips
Du kan även lägga till en opacitetsmodifierare för att göra bakgrundsfärgen mindre mättad.
Var det här till hjälp?
Hur sannolikt är det att du skulle rekommendera det här projektet till någon annan?
1 av 0 Nästa :