Programe com pilhas e formas

Etapa 1

Troque o VStack por um ZStack (pilha de profundidade).

Etapa 2

Abra a lista de visualizações e role até a parte inferior para encontrar as formas cápsula, círculo, elipse, retângulo e retângulo arredondado.

Etapa 3

Adicione uma forma ao ZStack para sua cabeça. Use RoundedRectangle (retângulo arredondado) para um rosto quadrado ou Capsule (cápsula) para um rosto mais redondo.

Dica

Retângulos arredondados exigem um raio de canto.

Etapa 1

Adicione uma linha em branco abaixo da cápsula e abra a lista de modificadores.

Etapa 2

Procure frame e toque na opção encontrada para adicioná-la ao código.

Etapa 3

Preencha os valores aproximados de altura e largura para criar sua cabeça.

Etapa 1

Adicione uma linha em branco abaixo de frame e abra a lista de modificadores.

Etapa 2

Digite foregroundStyle na barra de busca. Toque na opção encontrada para adicioná-la ao código.

Etapa 3

Para alterar a cor, selecione o código dentro dos parênteses e abra a lista de cores.

Etapa 4

Toque em qualquer cor para adicioná-la ao código.

Dica

Você tem a opção de criar sua própria cor. Escolha um dos trechos de código e edite os valores para que a cor fique parecida com seu tom de pele.

Etapa 1

Aplique o que você aprendeu para adicionar um retângulo que sirva como pescoço e ajustar o tamanho com um modificador frame.

Etapa 2

Adicione uma linha em branco abaixo do retângulo e procure offset na lista de modificadores.

Etapa 3

Toque em offset e edite o valor para deslocar a forma para baixo. Você pode apagar os parâmetros que não quiser usar.

Etapa 4

Mova o pescoço para baixo da cabeça.

Selecione o retângulo e os modificadores adicionados. Corte e cole o código na parte superior da pilha de profundidade. Em seguida, altere a cor para que corresponda à da cabeça.

Etapa 5

Aplique o que você aprendeu para adicionar uma camiseta, posicioná-la corretamente na tela e dar uma cor a ela.

Etapa 1

Adicione um círculo para seu cabelo. Use frame para deixá-lo com a mesma largura da cabeça ou um pouco maior.

Etapa 2

Adicione uma linha em branco abaixo do círculo. Digite .trim e toque em Return quando ele aparecer no recurso de preenchimento de código.

Observe que o modificador trim deve estar diretamente abaixo de uma forma.

Etapa 3

Experimente os valores de início e fim do recorte.

Etapa 4

Ajuste a localização das franjas ou do cabelo curto. Continue adicionando os elementos restantes para completar o cabelo.

Dica

Se você tiver mais de dez visualizações em uma pilha, um aviso de “número extra de argumentos na posição…” será exibido.

Se isso acontecer, agrupe elementos como mostrado aqui.

Etapa 1

Localize a forma que cria a cabeça no código. Adicione uma linha em branco abaixo da forma e procure shadow na lista de modificadores.

Etapa 2

Edite o raio da sombra. Experimente diferentes valores para ver como fica.

Dica

Se quiser, você pode adicionar uma cor para a sombra.