Na ultima aula, foi desenvolvida uma nova funcionalidade para o AluraMed, que consiste na evolução da saúde de um paciente. Durante esse processo, um novo elemento de listagem de entradas foi criado, utilizando a ferramenta de auto layout do Figma.
As propriedades de preenchimento foram fundamentais para tornar o processo de criação dos elementos no auto layout mais fluido e escalonável. No exemplo do card de evolução de saúde, foram utilizados auto layouts dentro de auto layouts, permitindo espaçamentos diferentes em direções específicas.
Vamos analisar a aplicação do auto layout no exemplo do último vídeo:
Auto Layout do Card de Evolução:
O auto layout é chamado de "Card Evolução" e possui a propriedade vertical, com 0 de espaçamento entre os itens. É constituído por três elementos: a camada acima do topo, um retângulo divisório e um elemento de textos abaixo.
Elemento do Topo:
É um auto layout com 16 de padding, proporcionando bordas laterais e verticais com 16px de espaçamento. Utiliza a propriedade "space between", distribuindo os elementos internos de forma equidistante em relação ao tamanho do elemento do topo. Possui a propriedade de "fill container", garantindo que seu tamanho lateral sempre ocupe toda a largura do elemento superior (o "Card Evolução").
Textos do Topo:
São dois elementos distribuídos verticalmente sem espaçamento entre eles. Utilizam a opção "fill container" lateralmente, permitindo que seu conteúdo alcance o final da caixa.
Textos Inferiores:
Também é um auto layout com distribuição horizontal dos elementos e 0 de espaçamento entre eles. Possui características semelhantes aos textos do topo, garantindo consistência no design. Essa análise mostra como o uso eficaz do auto layout e das propriedades de preenchimento pode facilitar a criação e a manutenção de elementos complexos em um projeto de design.
