Combiner des piles et des formes

Étape 1

Remplacez VStack par ZStack (pile en profondeur).

Étape 2

Ouvrez la liste de vues  et faites-la défiler vers le bas pour afficher les formes Capsule, Cercle, Ellipse, Rectangle et Rectangle aux angles arrondis.

Étape 3

Ajoutez une forme à la pile ZStack pour représenter votre tête. Utilisez un rectangle aux angles arrondis (RoundedRectangle) si vous avez un visage carré, ou Capsule si votre visage est plutôt rond.

Astuce

Pour les rectangles aux angles arrondis, vous devez préciser le rayon des coins.

Étape 1

Insérez une ligne vide sous votre forme, puis ouvrez la liste de modificateurs.

Étape 2

Recherchez Cadre (ou frame), puis touchez le modificateur pour l’insérer dans le code.

Étape 3

Entrez des valeurs approximatives pour la hauteur et la largeur de la tête.

Étape 1

Insérez une ligne vide sous frame, puis ouvrez la liste des modificateurs.

Étape 2

Tapez Style du premier plan (ou foregroundStyle) dans la barre de recherche. Touchez le modificateur pour l’insérer dans le code.

Étape 3

Pour choisir une autre couleur, sélectionnez le code entre les parenthèses et ouvrez la liste de couleurs.

Étape 4

Touchez une couleur pour l’insérer dans le code.

Astuce

Vous pouvez aussi créer votre propre couleur. Choisissez un de ces fragments de code, puis modifiez les valeurs pour obtenir une couleur qui correspond à votre teint.

Étape 1

Mettez en pratique ce que vous avez appris jusqu’ici pour ajouter un rectangle qui servira de cou et régler sa taille avec le modificateur frame.

Étape 2

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

Étape 3

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

Étape 4

Placez le cou sous la tête.

Sélectionnez le rectangle et tout modificateur que vous avez ajouté. Coupez le code et collez-le dans le haut de la pile en profondeur. Modifiez ensuite la couleur pour qu’elle corresponde à celle de la tête.

Étape 5

Mettez en pratique ce que vous avez appris jusqu’ici pour ajouter un chandail, le placer au bon endroit et choisir sa couleur.

Étape 1

Ajoutez un cercle en guise de cheveux. Utilisez frame pour lui donner une largeur équivalente ou légèrement supérieure à celle de la tête.

Étape 2

Insérez une ligne vide sous le cercle. Tapez .trim et appuyez sur la touche de retour du clavier pour tirer parti de la saisie semi-automatique.

Notez que le modificateur trim doit être utilisé directement sous la forme.

Étape 3

Jouez avec les valeurs pour déterminer où la forme sera rognée.

Étape 4

Peaufinez l’emplacement de la frange ou des cheveux courts, puis ajoutez tout autre élément nécessaire pour reproduire votre coiffure.

Astuce

Quand une pile contient plus de dix vues, l’avertissement « Extra arguments at position… » s’affiche.

Pour contourner le problème, groupez les éléments comme sur l’image.

Étape 1

Dans votre code, trouvez la forme qui sert de tête. Insérez une ligne vide sous la forme, puis recherchez Ombre (ou shadow) dans la liste des modificateurs.

Étape 2

Modifiez le rayon de l’ombre. Essayez différentes valeurs jusqu’à ce que le résultat vous convienne.

Astuce

Vous pouvez aussi choisir la couleur de l’ombre.