Alinhamento de texto no SwiftUI: guia completo com exemplos

Alinhamento de texto no SwiftUI: do iniciante ao profissional

Você já ficou olhando para a tela, tentando entender por que seu texto multilinha no SwiftUI insiste em ficar alinhado à esquerda, mesmo tendo especificado .center? Uma dor familiar. A pergunta "SwiftUI text-alignment" acumula milhares de visualizações no Stack Overflow por um bom motivo — é um daqueles pequenos detalhes que podem estragar toda a interface.

Neste artigo, vamos abordar todas as formas de controlar o alinhamento de texto no SwiftUI. Mostrarei não apenas as técnicas básicas, mas também truques que economizarão horas de pesquisa no Google. Vamos lá!

1. Básico: .multilineTextAlignment

O primeiro modificador que você encontrará é o multilineTextAlignment. Ele funciona especificamente com texto multilinha, mas na verdade também afeta o texto de linha única. Vejamos um exemplo:

import SwiftUI\n\nstruct AlignmentExample: View {\n    var body: some View {\n        VStack(spacing: 20) {\n            Text("Este texto está alinhado à esquerda. Por padrão no SwiftUI, o texto fica no lado esquerdo.")\n                .multilineTextAlignment(.leading)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n            \n            Text("Este texto está centralizado. Ideal para títulos e citações.")\n                .multilineTextAlignment(.center)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n            \n            Text("Este texto está alinhado à direita. Frequentemente usado em internacionalização para idiomas com escrita da direita para a esquerda.")\n                .multilineTextAlignment(.trailing)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n        }\n        .padding()\n    }\n}

Importante: multilineTextAlignment funciona apenas dentro de um contêiner que limita a largura do texto. Se você não definir um frame, o texto ocupará toda a largura disponível e o alinhamento pode não funcionar como esperado.

2. Diferença entre .leading e .left

No SwiftUI, existem .leading, .trailing, .left e .right. Qual é a diferença?

\n
• .leading / .trailing — valores adaptáveis. Em idiomas com escrita da esquerda para a direita (inglês, russo), .leading = .left, .trailing = .right. Em árabe ou hebraico, é o contrário.
\n
• .left / .right — fixação rígida ao lado. Não mudam dependendo da localidade.
\n

A Apple recomenda usar .leading e .trailing para suporte à internacionalização. Mas se você precisa de "sempre à esquerda", use .left.

3. Alinhamento de texto dentro de contêineres

Frequentemente, o problema não está no próprio Text, mas em como ele está posicionado dentro de VStack, HStack ou ZStack. É aqui que entra o parâmetro alignment das stacks.

3.1. VStack e HStack

struct StackAlignmentExample: View {\n    var body: some View {\n        VStack(alignment: .leading, spacing: 10) {\n            Text("Título")\n                .font(.title)\n            Text("Esta é uma descrição que deve começar na mesma borda esquerda que o título. Sem o alinhamento explícito da stack, o texto pode deslocar.")\n                .font(.body)\n        }\n        .frame(maxWidth: 300)\n        .padding()\n        .background(Color.yellow.opacity(0.3))\n        .cornerRadius(10)\n    }\n}

Dica: Se você quiser que todo o texto dentro de VStack esteja alinhado ao centro, mas cada elemento possa ter seu próprio alinhamento — combine o alignment da stack com o multilineTextAlignment de textos específicos.