Startseite

Mit Stapeln und Formen ein Porträt zusammenstellen

Mit Stapeln und Formen kreativ werden

Mit Stapeln und Formen ein Porträt zusammenstellen

Programmieren Sie ein Selbstporträt mithilfe von Stapeln, Formen und Modifikatoren.

Geschätzte Bearbeitungszeit für diese angeleitete Übung:

35 Min.

SwiftUI Tools entdecken.

Erstellen Sie ein Selbstporträt mit den folgenden Tools.

Stapel und Formen verwenden.

Verwenden Sie einen tiefen Stapel und fügen Sie eine Form für Ihren Kopf hinzu.

Schritt 1

Ändern Sie den VStack zu einem ZStack (tiefer Stapel).

Schritt 2

Öffnen Sie die Liste der Ansichten und scrollen Sie nach unten, um zu den Formen zu gelangen, wie Kapsel, Kreis, Ellipse, Rechteck und abgerundetes Rechteck.

Schritt 3

Fügen Sie eine Form für Ihren Kopf zum ZStack hinzu. Verwenden Sie ein abgerundetes Rechteck für ein rechteckiges Gesicht oder eine Kapsel für ein rundlicheres Gesicht.

Tipp

Bei abgerundeten Rechtecken muss ein Eckenradius festgelegt werden.

Die Größe einer Form anpassen.

Verwenden Sie den Modifikator frame (Rahmen), um die Größe einer Form festzulegen.

Schritt 1

Fügen Sie eine leere Zeile unter der Kapsel hinzu und öffnen Sie die Liste der Modifikatoren.

Schritt 2

Suchen Sie nach Rahmen und tippen Sie darauf, um ihn zu Ihrem Code hinzuzufügen.

Schritt 3

Tragen Sie die ungefähren Werte für Höhe und Breite ein, um Ihren Kopf zu erstellen.

Farbe hinzufügen.

Verwenden Sie den Modifikator foregroundStyle (Vordergrundstil), um eine Farbe für die Form auszuwählen.

Schritt 1

Fügen Sie eine leere Zeile unter frame hinzu und öffnen Sie die Liste der Modifikatoren.

Schritt 2

Geben Sie Vordergrundstil in der Suchleiste ein. Tippen Sie darauf, um den Modifikator zu Ihrem Code hinzuzufügen.

Schritt 3

Um die Farbe zu ändern, wählen Sie den Code zwischen den Klammern aus und öffnen Sie die Liste der Farben.

Schritt 4

Tippen Sie auf eine Farbe, um sie zu Ihrem Code hinzuzufügen.

Tipp

Optional können Sie Ihre eigene Farbe erstellen. Wählen Sie eines der Code-Snippets aus und bearbeiten Sie die Werte, um die Farbe an Ihren Hautton anzupassen.

Eine Ansicht verschieben.

Fügen Sie einen Hals hinzu und verschieben Sie ihn mit offset (Versatz) nach unten.

Schritt 1

Wenden Sie das Gelernte an, um ein Rechteck für Ihren Hals hinzuzufügen und die Größe mit einem frame Modifikator anzupassen.

Schritt 2

Fügen Sie eine leere Zeile unter dem Rechteck hinzu und suchen Sie in der Liste der Modifikatoren nach Versatz.

Schritt 3

Tippen Sie auf offset und passen Sie den Wert an, um die Form nach unten zu verschieben. Optional können Sie alle Parameter, die Sie nicht verwenden, löschen.

Schritt 4

Verschieben Sie den Hals unter den Kopf.

Wählen Sie das Rechteck und alle Modifikatoren aus, die Sie hinzugefügt haben. Schneiden Sie den Code aus und fügen Sie ihn oben im tiefen Stapel ein. Passen Sie dann die Farbe so an, dass sie zu Ihrem Kopf passt.

Schritt 5

Wenden Sie das Gelernte an, um ein T-Shirt hinzuzufügen, es richtig auf dem Bildschirm zu platzieren und eine Farbe zu wählen.

Eine Form kürzen.

Kürzen Sie eine Form, um einen Pony oder kurze Haare zu erstellen.

Schritt 1

Fügen Sie einen Kreis für Ihr Haar hinzu. Passen Sie ihn mit frame (Rahmen) so an, dass er ungefähr so breit wie das Gesicht oder etwas breiter ist.

Schritt 2

Fügen Sie eine leere Zeile unter dem Kreis hinzu. Geben Sie .trim ein und tippen Sie auf den Zeilenschalter, wenn der Modifikator in der Code-Vervollständigung angezeigt wird.

Hinweis: Der Modifikator trim (Kürzung) muss direkt unterhalb der Form stehen.

Schritt 3

Experimentieren Sie mit Werten, die die Anfangs- und Endposition für die Kürzung festlegen.

Schritt 4

Passen Sie die Position des Ponys oder der kurzen Haare an. Fügen Sie bei Bedarf weitere Elemente hinzu, um Ihr Haar zu vervollständigen.

Tipp

Wenn ein Stapel mehr als zehn Ansichten enthält, wird eine Warnung angezeigt: „Extra arguments at position…“.

Wenn das passiert, gruppieren Sie die Elemente wie hier zu sehen.

Einen Schatten hinzufügen.

Verwenden Sie einen Schatten, um Ihren Kopf und Hals voneinander zu trennen.

Schritt 1

Finden Sie im Code die Form, die ihren Kopf erstellt. Fügen Sie eine leere Zeile unter der Form hinzu und suchen Sie in der Liste der Modifikatoren nach Schatten.

Schritt 2

Bearbeiten Sie den Radius des Schattens. Experimentieren Sie mit verschiedenen Werten, um zu sehen, wie der Schatten aussieht.

Tipp

Optional können Sie eine Farbe für den Schatten hinzufügen.

Eine Hintergrundfarbe hinzufügen.

Fügen Sie eine Hintergrundfarbe für Ihr Selbstporträt hinzu.

Schritt 1

Fügen Sie oben in Ihrem ZStack eine leere Zeile hinzu und öffnen Sie die Liste der Farben. Tippen Sie auf eine Farbe, um sie zu Ihrem Code hinzuzufügen.

Tipp

Optional können Sie einen Modifikator opacity (Deckkraft) hinzufügen, um die Hintergrundfarbe abzuschwächen.

An Ihre Schüler:innen weitergeben.

Mehr erkunden.

Entdecken Sie weitere Projekte, die Sie dabei unterstützen, das Programmieren und die App-Entwicklung zu vermitteln.

War das hilfreich?

Wie wahrscheinlich ist es, dass Sie dieses Projekt weiterempfehlen?

1 – sehr unwahrscheinlich5 – sehr wahrscheinlich
Anmelden