Compón con pilas y figuras

Paso 1

Cambia la VStack a una ZStack (pila de profundidad).

Paso 2

Abre la lista de vistas y desplázate hasta abajo del todo para ver las figuras de cápsula, círculo, elipsis, rectángulo y rectángulo redondeado.

Paso 3

Añade una figura a la ZStack para tu cabeza. Usa un RoundedRectangle para una cara cuadrada o una Capsule para una cara más redondeada.

Consejo

Los rectángulos redondeados requieren un radio de esquina.

Paso 1

Añade una línea en blanco debajo de la cápsula y abre la lista de modificadores.

Paso 2

Busca frame y toca para añadir este elemento al código.

Paso 3

Rellena los valores aproximados de altura y anchura para dar forma a la cabeza.

Paso 1

Añade una línea en blanco debajo de frame y abre la lista de modificadores.

Paso 2

Escribe foregroundStyle en la barra de búsqueda. Toca ese elemento para añadirlo al código.

Paso 3

Para cambiar el color, selecciona el código dentro de los paréntesis y abre la lista de colores.

Paso 4

Toca cualquier color para añadirlo al código.

Consejo

Opcionalmente, crea tu propio color. Elige uno de los fragmentos de código y, a continuación, edita los valores para que coincidan con el tono de tu piel.

Paso 1

Aplica lo que has aprendido para añadir un rectángulo para el cuello y ajusta el tamaño con un modificador frame.

Paso 2

Añade una línea en blanco debajo del rectángulo y busca offset en la lista de modificadores.

Paso 3

Toca offset y edita el valor para desplazar la figura hacia abajo. Opcionalmente, elimina los parámetros que no uses.

Paso 4

Mueve el cuello debajo de la cabeza.

Selecciona el rectángulo y cualquier modificador que hayas añadido. Corta y pega el código en la parte superior de la pila de profundidad. A continuación, cambia el color para que coincida con tu cabeza.

Paso 5

Aplica lo que has aprendido para añadir una camiseta, colócala correctamente en la pantalla y asígnale un color.

Paso 1

Añade un círculo para tu cabello. Usa frame para que tenga aproximadamente el mismo ancho que tu cabeza o un poco más.

Paso 2

Añade una línea en blanco debajo del círculo. Escribe .trim y toca Retorno cuando aparezca en la introducción de código.

Ten en cuenta que el modificador trim debe ir directamente debajo de una figura.

Paso 3

Experimenta con valores para el inicio y final del acortamiento.

Paso 4

Ajusta la posición del flequillo o del pelo corto. Continúa añadiendo los elementos restantes para completar tu cabello.

Consejo

Si una pila contiene más de diez vistas, recibirás una advertencia Extra Arguments at Position… (Demasiados argumentos en la posición…).

En tal caso, agrupa elementos como se muestra aquí.

Paso 1

Localiza la figura que crea tu cabeza en el código. Añade una línea en blanco debajo de la figura y busca shadow en la lista de modificadores.

Paso 2

Edita el radio de la sombra. Experimenta con diferentes valores para ver cómo queda.

Consejo

Opcionalmente, añade un color para la sombra.