Cuando diseñas interfaces en SwiftUI, no siempre sabes en qué tamaño de pantalla se ejecutará tu app. Para resolver esto existe un contenedor especial llamado GeometryReader, que permite leer las dimensiones del elemento padre y usar esas medidas como referencia para dimensionar las vistas hijas. A continuación se explica paso a paso cómo implementarlo y cuándo conviene usarlo.
¿Cómo preparar el VStack antes de usar GeometryReader?
Antes de incorporar el GeometryReader, es necesario que el contenedor VStack ocupe todo el espacio disponible. Para lograrlo se aplica el modificador frame con valores máximos en ancho y alto [00:52]:
swift
VStack {
// contenido
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
maxWidth: .infinity indica que el stack se expandirá horizontalmente hasta el límite de su contenedor.maxHeight: .infinity hace lo mismo en sentido vertical.
Con esto, las líneas azules del preview confirman que el VStack abarca toda la pantalla.
¿Qué es GeometryReader y cómo se implementa?
GeometryReader es un contenedor que recibe un parámetro —comúnmente llamado geometry— con la información de tamaño (size) del espacio que ocupa [01:42]. Su sintaxis básica es:
swift
GeometryReader { geometry in
VStack {
// vistas internas
}
}
El objeto geometry expone la propiedad size, que a su vez contiene width (ancho) y height (alto) del contenedor. Gracias a esto puedes dimensionar cualquier vista hija de forma relativa en lugar de absoluta.
¿Cómo usar geometry.size para dimensionar una imagen?
Partiendo de una imagen con tamaño fijo de 100×100 puntos [02:28]:
swift
Image("Plazy")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 100, height: 100)
Se puede reemplazar el valor fijo por una fracción del contenedor [03:10]:
swift
Image("Plazy")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(
width: geometry.size.width / 2,
height: geometry.size.height / 3
)
geometry.size.width / 2: la imagen ocupa la mitad del ancho disponible.geometry.size.height / 3: la imagen ocupa un tercio del alto disponible.
De esta forma, el frame depende de la geometría del contenedor y no de puntos absolutos.
¿Cuándo conviene usar GeometryReader en lugar del sistema de puntos?
El sistema de puntos sigue siendo la opción más sencilla y directa para la mayoría de los casos. GeometryReader resulta útil cuando:
- No sabes en qué tipo de pantalla se mostrará la interfaz.
- Necesitas que una vista siempre ocupe un porcentaje exacto de su contenedor.
- Realizas operaciones matemáticas internas —divisiones, multiplicaciones— sobre las dimensiones reales del layout [04:10].
Sin embargo, puede añadir complejidad innecesaria si solo requieres tamaños fijos. La recomendación es reservarlo para escenarios donde debas basarte explícitamente en el tamaño del contenedor [04:42].
¿Qué viene después de dominar GeometryReader?
Una vez que comprendes cómo adaptar vistas al contenedor con GeometryReader, el siguiente paso natural es aprender a modificar código dependiendo del dispositivo específico, por ejemplo, distinguir entre un iPhone y un iPad [05:00]. Esto complementa la estrategia de interfaces adaptativas que comenzaste con GeometryReader.
Si ya probaste dividir y multiplicar las dimensiones del contenedor, comparte en los comentarios qué proporción te funcionó mejor para tu diseño.
