HStack, VStack y ZStack en SwiftUI

- Andrés Cruz

In english

HStack, VStack y ZStack en SwiftUI

Usaremos los V,H,Z Stack para apilar o colocar múltiple contenido.

Cuando creamos un proyecto en SwiftUI tenemos una clase por defecto llamada ContentView que por supuesto podemos cambiarle el nombre si no es mucho de tu agrado pero no viene mucho al caso de momento... en este archivo se encuentra un componente de vista, que en la práctica viene siendo solamente una pantalla de nuestra app, una pantalla o vista para el login, registrarse, un listado, etc; puedes ver algunas de las imágenes de emuladores en esta publicación para que te hagas mejor a la idea.

En este componente, específicamente en el struct que tiene el mismo nombre del archivo, ContentView por defecto, se encuentra una variable llamada body la cual define el cuerpo de nuestra vista; en la misma tenemos que definir elementos de interfaz gráfica, aunque hay un punto muy importante, y es que SÓLO puede ver un elemento raíz; por ejemplo un texto:

struct ContentView: View {
        
    var body: some View {
        Text("Hola")
            .foregroundColor(blue)
    }
} 
Texto en SwiftUI

Ahora bien, qué pasa si queremos colocar más contenido, qué es lo que seguramente vas a querer hacer en la mayoría de los casos:

struct ContentView: View {
        
    var body: some View {
        Text("Hola")
            .foregroundColor(blue)
        Text("Hola")
            .foregroundColor(blue)
    }
}

Vas a ver que no vas a poder, o no va a funcionar como lo esperado; y aquí es donde entran los componentes del layout.

V,H,Z Stack para apilar o colocar múltiple contenido

Estos vienen siendo los elementos principales en SwiftUI, que vienen siendo los componentes de Layout; son componentes o cajas que nos permiten agrupar múltiples elementos para nuestra Interfaz Gráfica UI, son los famosos 3 componentes de layout VStack, HStack, and ZStack. 

VStack es un contenedor que nos permite agregar múltiples hijos, múltiples elementos apilados de manera vertical.

HStack es un contenedor que nos permite agregar múltiples hijos, múltiples elementos apilados de manera horizontal.

Finalmente tenemos un componente ZStack para colocar los elementos alineándose en cualquiera de sus ejes, lo interesante de esto es que los podemos colocar o definir en cualquier posición, dando una creatividad inmensa para nuestras interfaces.

Ejemplo de una vista VStack

Así que en resumen, con estos componentes para el layout podemos organizar múltiple contenido, tanto como necesitemos; así que si queremos aplicar textos:

   var body: some View {
        VStack {
            Text("Hola")
                .foregroundColor(.blue)
            Text("Hola")
                .foregroundColor(.red)
            Text("Hola")
                .foregroundColor(.yellow)
        }
    } 
Textos y VStack

Y por supuesto podemos aplicar algunos estilos a nuestro contenidos, como cambiarle el color como hicimos anteriormente o inclusive cambiar el color al elemento contenedor:

     VStack {
            Text("Hola")
                .foregroundColor(.blue)
            Text("Hola")
                .foregroundColor(.red)
            Text("Hola")
                .foregroundColor(.yellow)
        }.background(Color.purple)

Algo de Padding:

        VStack {
            Text("Hola")
                .foregroundColor(.blue)
            Text("Hola")
                .foregroundColor(.red)
            Text("Hola")
                .foregroundColor(.yellow)
        }.padding().background(Color.purple)

Para esto es importante notar que tienes que aplicar el padding antes que el color de fondo, ya que aquí en SwiftUI el orden de los factores SÍ altera el producto:

Resumen

  • Un VStack agrega elementos de forma vertical, con nuestras vistas o elementos visuales agregadas de arriba a abajo.
  • Agregar el Spacer() obliga a la vista a utilizar la cantidad máxima de espacio vertical.
  • Agregar un Divisor() obliga a la vista a utilizar la cantidad máxima de espacio horizontal.

Por defecto, la línea divisoria no tiene color. Para establecer el color del divisor, agregamos el modificador/función .background (Color.black). Elementos como background (Color.black), .padding() y .offests(…) se denominan ViewModifiers, o simplemente modificadores. Los modificadores se pueden aplicar a las vistas u otros modificadores, produciendo variaciones.

Recuerda definir el ContentView_Previews para ver un previews del contenido que estás armando.

struct ContentView: View {
        
    var body: some View {
        VStack {
            Text("Hola")
                .foregroundColor(.blue)
            Text("Hola")
                .foregroundColor(.red)
            Text("Hola")
                .foregroundColor(.yellow)
        }.padding().background(Color.purple)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Y ahora, vamos a presentar algunos elementos más que vienen de la mano; por ejemplo, qué pasa si quieres que tu contenedor, VStack, ocupe TODA la pantalla, es decir que crezca a lo largo y ancho y con esto todo el tamaño de la pantalla disponible, para eso, tenemos que emplear los elementos Spacer y Divider respectivamente:

   var body: some View {
        VStack {
            Text("Hola")
                .foregroundColor(.blue)
            Text("Hola")
                .foregroundColor(.red)
            Spacer()
            Divider()
            Text("Hola")
                .foregroundColor(.yellow)
            
        }.padding().background(Color.purple)
    }

Componente HStack

Ahora, si quieres apilar a lo horizontal:

    var body: some View {
        HStack {
            Text("Hola")
                .foregroundColor(.blue)
            Text("Hola")
                .foregroundColor(.red)
            Spacer()
            Divider()
            Text("Hola")
                .foregroundColor(.yellow)
            
        }.padding().background(Color.purple)
    } 
Textos, Spacer, Divider

VStack, apila tu contenido en vertical, HStack apila tu contenido en horizontal

En cualquier caso, también puedes apilar tu contenido de manera vertical, como si fuera una fila, aunque en la mayoría de los casos vas a querer apilarlo en una columna, también puedes aplicarlo de manera vertical, para esto, tenemos que emplear el VStack; por lo demás, todo es exactamente igual al HStack.

Componente ZStack

ZStack, pon tus elementos en cualquier parte, en muchos casos, puede que te interese colocar elementos superpuestos o al menos tener más control para personalizar tus elementos en tu interfaz, y esto es lo que te permite hacer el ZStack, que con la función de offset, te permite indicar la posición en el eje cartesiano indicando un parámetro para el x y y:

struct ContentView: View {
    
    var body: some View {
        HStack {
            Text("Hola")
                .foregroundColor(.blue)
            Text("Hola")
                .foregroundColor(.red)
            
            ZStack{
                Text("ZStack Texto 1")
                    .padding()
                    .background(Color.green)
                    .opacity(0.8)
                Divider()
                Text("ZStack Texto 2")
                    .padding()
                    .background(Color.green)
                    .offset(x: 80, y: -200)
            }.background(Color.blue)
            
            Spacer()
            Divider()
            Text("Hola")
                .foregroundColor(.yellow)
        }.padding().background(Color.purple)
    }
} 
ZStack

Conclusiones

Ya con esto tienes los elementos necesarios para emplear a crear tus primeras interfaces y empezar a organizar tus interfaces como tu quieras. Estos elementos contenedores, son fundamentales para construir las bases de tu app, para indicar la estructura en la cual van a estar contenidos otros elementos como imágenes, textos, campos de texto, elementos de formulario etc.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.