SwiftUI Series 03｜Solucionando problemas comuns de layout quando a página “parece um pouco ruim”

Muitos problemas com páginas SwiftUI são sutis:

• Chame errado, não está obviamente quebrado.
• Digamos que é verdade. Parece um pouco pior.

Os sentimentos comuns incluem:

• O cartão parece um pouco flutuante
• Existe uma estranha relação entre texto e ícones
• O espaçamento parece instável
• Certas áreas sempre parecem lotadas ou vazias

É mais provável que esse tipo de problema seja confundido com “estética insuficiente” ou “o design parece errado”. Mas muitas vezes, ainda é essencialmente um problema de layout, apenas:

A estrutura, a distribuição do espaço e o ritmo visual estão alinhados no mesmo nível?

1. Muitas páginas que “parecem um pouco ruins” são, na verdade, porque a estrutura principal não é estável.

A razão pela qual algumas páginas sempre parecem estranhas é que, superficialmente, parece que falta um certo padding, mas na verdade, mais próximo da estrutura principal, ele fica um pouco embaçado.

Por exemplo, se um bloqueio de cartão também for responsável por:

• Layout do eixo principal do conteúdo
• alinhamento local
• Camadas decorativas
• Correção de espaçamento

No final é muito fácil se tornar:

• pode ser exibido logicamente
• Está sempre um pouco disperso visualmente

A razão é simples: Quando uma camada de layout é responsável por muitas coisas, o ajuste fino local continuará a afetar a estrutura geral.

2. O problema mais comum é que as responsabilidades hierárquicas são misturadas.

Muitas páginas podem ter esta aparência:

• Camada externa VStack
• Os do meio HStack
• Adicione padding a cada camada
• Misture mais um pouco Spacer
• No final, se não gostar, adicione outro frame

O problema com esta forma de escrever não é necessariamente errado, mas sim responsabilidades hierárquicas pouco claras. É difícil dizer:

• Qual camada é responsável pela estrutura do conteúdo
• Qual camada é responsável pelo alinhamento local -Qual camada é apenas decoração visual

Depois que essas coisas estiverem misturadas na mesma camada, a página pode facilmente entrar em um estado: Cada ajuste parece razoável, mas a coisa toda está ficando cada vez mais difícil de estabilizar.

3. Páginas visualmente “instáveis” geralmente são causadas por sistemas de espaçamento instáveis.

Este é um problema de frequência muito alta.

Muitas páginas não parecem sofisticadas. Superficialmente, parecem cores ou fontes, mas na verdade estão mais próximas de espaçamento e ritmo inconsistentes:

• 12 entre A e B
• entre B e C 18
• Entre C e D torna-se 14 novamente

Se essas diferenças não tiverem uma semântica clara e forem inventadas à medida que você escreve, a página não terá senso de ritmo.

Portanto, para muitas páginas que “parecem ruins”, o que você realmente precisa verificar não é:

• Ainda falta uma divisória aqui?

Em vez disso:

• Se o ritmo vertical entre blocos de informação do mesmo tipo é consistente
• Existe uma hierarquia estável entre título principal, subtítulo e texto explicativo?
• Se as margens interna e externa do cartão seguem o mesmo conjunto de dimensões

O SwiftUI torna mais fácil para as pessoas construírem rapidamente uma estrutura, mas sem um ritmo espacial estável, a página estará sempre no estado de “a função está certa, mas o temperamento está errado”.

4. O texto muitas vezes torna a página “pior”

Porque o texto é o elemento que mais facilmente expõe se a lógica do layout é estável.

As perguntas frequentes incluem:

• Se o título for muito longo, distorcerá a estrutura geral.
• A legenda fica desequilibrada após quebra de linha
• Relação de linha de base não natural entre ícone e texto
• O controle de largura de diferentes blocos de texto é inconsistente

Estas questões geralmente não são decididas antecipadamente:

• Quem tem maior prioridade de texto?
• Qual deve ser a largura do texto?
• Se o layout ainda permanece estável quando há várias linhas

Quando uma página parecer normal apenas sob “condições de cópia curta”, o conteúdo real será revelado assim que chegar.

5. Quanto mais a melodia se torna, mais caótica ela se torna.

Porque tratam de “aparências”, não de “causas estruturais”.

Por exemplo, quando algo na página não satisfaz seus olhos, é fácil instintivamente:

• Adicione outro padding
• Adicione outro Spacer
• Defina outro frame

É claro que pode ser mais agradável aos olhos no curto prazo, mas se você não olhar para trás e perguntar:

• Qual andar deve ser responsável pela alocação do espaço aqui?
• Esse reparo está apenas eliminando problemas estruturais?

No futuro, dependeremos cada vez mais de patches locais em vez da própria estrutura.

A razão pela qual as páginas do SwiftUI são fáceis de “ficar mais estranhas à medida que mudam” é principalmente porque torna as modificações locais particularmente fáceis.

6. Uma sequência de solução de problemas mais eficaz

Se uma página do SwiftUI “parece ruim”, normalmente verifico nesta ordem:

1. Se a camada estrutural principal está clara.
2. Se o espaçamento entre blocos de informação no mesmo nível é uniforme.
3. O texto é estável em conteúdo longo, conteúdo curto e múltiplas linhas?
4. Quais modificadores são estruturais e quais são apenas pós-patches.
5. Se uma correção local está perturbando o ritmo geral.

Este pedido tem vantagens: É perguntar “Qual nível de responsabilidade foi misturado?”

7. Conclusão: Muitas páginas “não são avançadas” porque o nível de layout e o ritmo não são unificados.

Para resumir, eu diria:

As páginas SwiftUI sempre “parecem um pouco piores” e muitas vezes parecem ser incompetentes na escrita de interfaces. Na verdade, o nível de layout, a alocação de espaço e o ritmo visual não são tratados como um sistema.

Portanto, o método mais eficaz de reforma é normalmente olhar para trás e rever:

• A estrutura principal está de pé?
• Se o espaçamento tem um ritmo consistente
• Se o texto e o conteúdo permanecem estáveis sob dados reais

Depois que essas três coisas ficam claras, o temperamento da página geralmente melhora significativamente.