Hjem

Bygg med stabler og figurer

Bygg med stabler og figurer

Bygg med stabler og figurer

Bruk kode til å lage et selvportrett ved hjelp av stabler, figurer og modifikatorer.

Estimert tid det tar å fullføre denne økten:

35 min

Utforsk SwiftUI-verktøy.

Bruk følgende verktøy til å lage et selvportrett.

Bruk stabler og figurer.

Bruk en dybdestabel og legg til en figur som skal forestille hodet.

Trinn 1

Endre VStack til ZStack (dybdestabel).

Trinn 2

Åpne listen med visninger og rull ned til bunnen for å finne figurene oval, sirkel, ellipse, rektangel og avrundet rektangel.

Trinn 3

Legg til en figur som skal forestille hodet ditt i ZStack. Bruk RoundedRectangle hvis du har et kantete ansikt, eller Capsule hvis du har et rundt ansikt.

Tips

Avrundede rektangler krever en hjørneradius.

Juster størrelsen på en figur.

Bruk frame-modifikatoren til å spesifisere størrelsen til figuren.

Trinn 1

Legg til en tom linje under ovalen, og åpne deretter listen med modifikatorer.

Trinn 2

Søk etter frame og trykk på den for å legge den til i koden din.

Trinn 3

Fyll inn omtrentlige verdier for høyde og bredde for å opprette figuren som skal være hodet ditt.

Legg til farge.

Bruk modifikatoren foregroundStyle til å gi figuren en farge.

Trinn 1

Legg til en tom linje under frame, og åpne deretter listen med modifikatorer.

Trinn 2

Skriv foregroundStyle i søkefeltet. Trykk på den for å legge den til i koden.

Trinn 3

Hvis du vil endre farge, markerer du koden inni parentesen og åpner listen med farger.

Trinn 4

Trykk på en farge for å legge den til i koden din.

Tips

Du kan eventuelt lage din helt egen farge. Velg en av kodesnuttene og juster verdiene til fargen ligner hudtonen din.

Omorganiser visningen.

Legg til en hals, og juster plasseringen ved hjelp av modifikatoren offset.

Trinn 1

Bruk det du har lært, til å legge til et rektangel for halsen din og justere størrelsen med en frame-modifikator.

Trinn 2

Legg til en tom linje under rektangelet, og søk deretter etter offset i listen med modifikatorer.

Trinn 3

Trykk på offset og rediger verdien for å flytte figuren ned. Du kan eventuelt slette parametere du ikke bruker.

Trinn 4

Plasser halsen rett under hodet.

Marker rektangelet og eventuelle modifikatorer du har lagt til. Klipp ut og lim inn koden øverst i dybdestabelen. Deretter endrer du fargen i den, så den blir lik hodet.

Trinn 5

Bruk det du har lært, til å legge til en genser eller annen overdel. Plasser den riktig på skjermen og gi den en farge.

Beskjær en figur.

Beskjær en figur for å lage pannelugg eller en kort hårfrisyre.

Trinn 1

Lag hår ved å legge til en sirkel. Bruk frame til å gjøre den like bred som hodet ditt eller litt bredere.

Trinn 2

Legg til en tom linje under sirkelen. Skriv inn .trim og trykk på returtasten når den vises i kodefullføringen.

Merk at modifikatoren trim må komme rett under en figur.

Trinn 3

Prøv deg frem med verdier for å se hvor beskjæringen bør starte og slutte.

Trinn 4

Juster posisjoneringen av panneluggen eller den korte hårfrisyren. Fortsett å legge til elementer til du er fornøyd med håret.

Tips

Hvis du har mer enn ti visninger i en stabel, vises advarselen «Ekstra argumenter ved posisjon …»

Hvis det skjer, kan du gruppere elementer som vist her.

Legg til en skygge.

Bruk en skygge til å skape en overgang mellom hode og hals.

Trinn 1

Finn figuren som utgjør hodet ditt i koden. Legg til en tom linje under figuren, og søk deretter etter shadow i listen med modifikatorer.

Trinn 2

Rediger skyggens radius. Prøv deg frem med forskjellige verdier for å se hvordan de tar seg ut.

Tips

Hvis du ønsker, kan du gi skyggen en farge.

Legg til en bakgrunnsfarge.

Legg til en bakgrunnsfarge i selvportrettet ditt.

Trinn 1

Legg til en tom linje øverst i ZStack, og åpne deretter listen med farger. Trykk på en farge for å legge den til i koden din.

Tips

Du kan velge å legge til en opacity-modifikator for å tone ned bakgrunnsfargen.

Videreformidle dette til elevene dine.

Utforsk mer.

Oppdag flere prosjekter som er utformet for å hjelpe deg med å undervise i koding og apputvikling.

Var dette nyttig?

Hvor sannsynlig er det at du kommer til å anbefale dette prosjektet til andre?

1 – svært usannsynlig5 – svært sannsynlig
Logg på