Alineación de texto en SwiftUI: guía completa con ejemplos

Alineación de texto en SwiftUI: de principiante a profesional

¿Alguna vez te has quedado mirando la pantalla, tratando de entender por qué tu texto multilínea en SwiftUI se obstina en alinearse a la izquierda, aunque claramente especificaste .center? Un dolor familiar. La pregunta "SwiftUI text-alignment" acumula miles de visitas en Stack Overflow no por casualidad: es uno de esos pequeños detalles que pueden arruinar toda la interfaz.

En este artículo, analizaremos todas las formas de controlar la alineación de texto en SwiftUI. Te mostraré no solo las técnicas básicas, sino también trucos que te ahorrarán horas de búsqueda en Google. ¡Allá vamos!

1. Lo básico: .multilineTextAlignment

El primer modificador con el que te encontrarás es multilineTextAlignment. Funciona específicamente con texto multilínea, pero en realidad también afecta al texto de una sola línea. Veámoslo con un ejemplo:

import SwiftUI\n\nstruct AlignmentExample: View {\n    var body: some View {\n        VStack(spacing: 20) {\n            Text("Este texto está alineado a la izquierda. Por defecto en SwiftUI, el texto se alinea al lado izquierdo.")\n                .multilineTextAlignment(.leading)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n            \n            Text("Este texto está centrado. Ideal para títulos y citas.")\n                .multilineTextAlignment(.center)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n            \n            Text("Este texto está alineado a la derecha. Se usa a menudo en internacionalización para idiomas con escritura de derecha a izquierda.")\n                .multilineTextAlignment(.trailing)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n        }\n        .padding()\n    }\n}

Importante: multilineTextAlignment solo funciona dentro de un contenedor que limite el ancho del texto. Si no especificas un frame, el texto ocupará todo el ancho disponible y es posible que la alineación no funcione como esperas.

2. Diferencia entre .leading y .left

En SwiftUI existen .leading, .trailing, .left y .right. ¿Cuál es la diferencia?

\n
• .leading / .trailing — valores adaptativos. En idiomas con escritura de izquierda a derecha (inglés, ruso), .leading = .left, .trailing = .right. En árabe o hebreo, es al revés.
\n
• .left / .right — fijación rígida al lado. No cambian según la configuración regional.
\n

Apple recomienda usar .leading y .trailing para admitir la internacionalización. Pero si necesitas específicamente "siempre a la izquierda", usa .left.

3. Alineación de texto dentro de contenedores

A menudo, el problema no está en el propio Text, sino en cómo está ubicado dentro de un VStack, HStack o ZStack. Aquí es donde entra en juego el parámetro alignment de los stacks.

3.1. VStack y 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 es una descripción que debe comenzar en el mismo borde izquierdo que el título. Sin una alineación explícita del stack, el texto podría desviarse.")\n                .font(.body)\n        }\n        .frame(maxWidth: 300)\n        .padding()\n        .background(Color.yellow.opacity(0.3))\n        .cornerRadius(10)\n    }\n}

Truco: Si deseas que todo el texto dentro de un VStack esté alineado al centro, pero que cada elemento pueda tener su propia alineación, combina el alignment del stack con multilineTextAlignment en los textos específicos.