Compone 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 la parte inferior para encontrar las figuras de cápsula, círculo, elipse, rectángulo y rectángulo redondeado.

Paso 3

Agrega una figura a la ZStack para la cabeza. Usa un RoundedRectangle para una cara cuadrada o una cápsula para una cara más redondeada.

Consejo

Los rectángulos redondeados requieren un radio de esquina.

Paso 1

Agrega una línea en blanco debajo de la cápsula y luego abre la lista de modificadores.

Paso 2

Busca el marco y toca para agregarlo al código.

Paso 3

Completa los valores aproximados de altura y ancho para crear la cabeza.

Paso 1

Agrega una línea en blanco debajo del marco y luego abre la lista de modificadores.

Paso 2

Escribe foregroundStyle en la barra de búsqueda. Tócala para agregarla 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 agregarlo al código.

Consejo

De manera opcional, crea tu propio color. Elige uno de los fragmentos de código y luego edita los valores para que coincidan con tu tono de piel.

Paso 1

Aplica lo que aprendiste para agregar un rectángulo para el cuello y ajusta el tamaño con un modificador de marco.

Paso 2

Agrega una línea en blanco debajo del rectángulo y luego busca desplazar en la lista de modificadores.

Paso 3

Toca desplazar y edita el valor para bajar la figura. De manera opcional, elimina los parámetros que no uses.

Paso 4

Mueve el cuello por debajo de la cabeza.

Selecciona el rectángulo y los modificadores que agregaste. Corta y pega el código en la parte superior de la pila de profundidad. Luego, cambia el color para que coincida con la cabeza.

Paso 5

Aplica lo que aprendiste para agregar una camiseta, colocarla correctamente en la pantalla y darle un color.

Paso 1

Agrega un círculo para el cabello. Usa el marco para que tenga aproximadamente el mismo ancho que la cabeza o que sea un poco más grande.

Paso 2

Agrega una línea en blanco debajo del círculo. Escribe .trim y toca Retornar cuando esta aparezca en la compleción de código.

Ten en cuenta que el modificador de recorte debe estar directamente debajo de una figura.

Paso 3

Experimenta con valores para saber dónde debe comenzar y finalizar el recorte.

Paso 4

Ajusta la ubicación del flequillo o del cabello corto. Continúa agregando los elementos restantes para completar el cabello.

Consejo

Si tienes más de diez vistas en una pila, obtendrás una advertencia de “Argumentos adicionales en la posición…”.

Si esto sucede, agrupa elementos como se ve aquí.

Paso 1

Ubica la figura que crea la cabeza en el código. Agrega una línea en blanco debajo de la figura y luego busca sombra en la lista de modificadores.

Paso 2

Edita el radio de la sombra. Experimenta con diferentes valores para observar cómo se ve.

Consejo

Opcionalmente, agrega un color para la sombra.