Composer avec des piles et des formes

Créer avec des piles et des formes

Composer avec des piles et des formes

Codez un autoportrait à l’aide de piles, de formes et de modificateurs.

Estimation du temps nécessaire pour terminer ce didacticiel :

35 minutes

Explorez les outils SwiftUI.

Utilisez les outils suivants pour réaliser un autoportrait.

Utilisez des piles et des formes.

Utilisez une pile en profondeur et ajoutez une forme pour représenter votre tête.

Étape 1

Remplacez la VStack par une ZStack (pile en profondeur).

Étape 2

Ouvrez la liste des vues et faites défiler vers le bas pour trouver les formes : capsule, cercle, ellipse, rectangle et rectangle aux angles arrondis.

Étape 3

Ajoutez une forme à la ZStack pour définir votre tête. Utilisez un RoundedRectangle (Rectangle aux angles arrondis) pour un visage carré, ou une Capsule pour un visage plus arrondi.

Conseil

Pour les rectangles aux angles arrondis, il faut indiquer le rayon des coins.

Ajustez la taille d’une forme.

Utilisez le modificateur frame pour définir la taille d’une forme.

Étape 1

Ajoutez une ligne vierge sous la capsule, puis ouvrez la liste des modificateurs.

Étape 2

Recherchez le modificateur frame (Cadre) et touchez‑le pour l’ajouter à votre code.

Étape 3

Indiquez les valeurs approximatives de hauteur et de largeur pour créer votre tête.

Mettez de la couleur.

Utilisez le modificateur foregroundStyle pour donner une couleur à la forme.

Étape 1

Ajoutez une ligne vierge sous frame, puis ouvrez la liste des modificateurs.

Étape 2

Saisissez foregroundStyle (Style du premier plan) dans la barre de recherche. Touchez‑le pour l’ajouter à votre code.

Étape 3

Pour changer de couleur, sélectionnez le code entre parenthèses et ouvrez la liste des couleurs.

Étape 4

Touchez n’importe quelle couleur pour l’ajouter à votre code.

Conseil

Vous pouvez éventuellement créer votre propre couleur. Choisissez l’un des extraits de code, puis modifiez les valeurs afin d’obtenir la couleur correspondant à votre teint.

Décalez une vue.

Ajoutez un cou, puis déplacez-le vers le bas en utilisant offset (Décalage).

Étape 1

Appliquez ce que vous avez appris afin d’ajouter un rectangle pour représenter votre cou et ajustez‑en la taille avec un modificateur frame (Cadre).

Étape 2

Ajoutez une ligne vierge sous le rectangle, puis recherchez offset (ou Décalage) dans la liste des modificateurs.

Étape 3

Touchez offset et modifiez la valeur pour déplacer la forme vers le bas. Vous pouvez éventuellement supprimer les paramètres que vous n’utilisez pas.

Étape 4

Déplacez le cou pour le positionner sous la tête.

Sélectionnez le rectangle et les modificateurs que vous avez ajoutés. Coupez et collez le code sur le haut de la pile en profondeur. Puis, choisissez la couleur correspondant à celle de votre tête.

Étape 5

Appliquez ce que vous avez appris pour ajouter une chemise, placez-la correctement sur l’écran et donnez-lui une couleur.

Élaguez une forme.

Élaguez une forme pour créer une frange ou des cheveux courts.

Étape 1

Ajoutez un cercle pour représenter vos cheveux. Utilisez frame pour que votre chevelure soit à peu près de la même largeur que votre tête ou légèrement plus large.

Étape 2

Ajoutez une ligne vierge sous le cercle. Tapez .trim (Élaguer) et touchez Retour à l’apparition du modificateur dans la saisie semi-automatique du code.

Notez que le modificateur trim doit se trouver directement en dessous d’une forme.

Étape 3

Testez différentes valeurs pour déterminer les limites de l’élagage.

Étape 4

Ajustez l’emplacement de la frange ou des cheveux courts. Ajoutez tout autre élément nécessaire pour parfaire votre chevelure.

Conseil

Si une pile contient plus de dix vues, vous recevrez l’avertissement « Extra arguments at position… ».

Dans ce cas, regroupez plusieurs éléments, comme vous le voyez ici.

Ajoutez une ombre.

Utilisez une ombre pour séparer votre tête de votre cou.

Étape 1

Localisez la forme qui représente votre tête dans le code. Ajoutez une ligne vierge sous la forme, puis recherchez shadow (Ombre) dans la liste des modificateurs.