Creación de Layouts Complejos con Stacks en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:14

Creación de Layouts Complejos con Stacks en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 5 de 23

Clase 5 / 23

Comentarios (20)20 comentarios

Sergio Romo Medina

Hace 2 años

Sebastian Hernandez Matiz

Hace un año

Danny Cuzquet Flores

Hace un año

Ismael Alejandro Contreras Barron

Hace un año

sebastian sandoval

Hace 2 años

Agustina Bussi

Profesor

Hace 2 años

Alvaro Cuiza Laime

Hace 2 años

Alvaro Cuiza Laime

Hace 2 años

Marlon Steven Diaz Lopez

Angel Mambel

Kevin Niño guerrero

Santiago Amaya

Santiago Amaya

Jesús Alfredo Morales Torres

Hace 9 meses

Danny Cuzquet Flores

Hace 10 meses

Bryan Alexander Guapacha Florez

Hace 2 años

Platzi

Hace 2 años

David Geronimo Quiroga Torres

Hace un año

JULIAN DAVID PINZON MOLINA

Hace un año

Gagandeep Dass

Hace 2 años

Julian Gomez

Hace 2 años

José Valentin Abundo Hernandez

Hace 2 años

Recursos

Los stacks en SwiftUI son herramientas fundamentales para crear y gestionar la disposición de elementos en una interfaz de usuario. Son componentes que nos permiten agrupar múltiples vistas en una única vista más compleja, organizando elementos en un eje específico. Existen tres tipos principales de stacks en SwiftUI, y cada uno tiene un propósito único:

VStack: organiza los elementos verticalmente, uno debajo del otro.
HStack: organiza los elementos horizontalmente, uno al lado del otro.
ZStack: organiza los elementos en profundidad, uno delante del otro.

¿Cómo se implementa un VStack?

El VStack es utilizado para agrupar elementos de manera vertical. En un proyecto de SwiftUI, se implementa de la siguiente manera:

VStack {
    Text("Nunca")
    Text("Pares")
    Text("De")
    Text("Aprender")
}

En este ejemplo, los textos se alinean uno sobre el otro en un eje vertical. Además, existen atributos que se pueden modificar para personalizar el alineamiento y el espaciado entre los elementos del VStack.

Alineación: controla la alineación de los elementos dentro del VStack. Se puede configurar con el parámetro alignment y acepta valores como .leading, .trailing y .center.
Espaciado: define el espacio entre los elementos dentro del VStack con el parámetro spacing.

VStack(alignment: .leading, spacing: 20) { Text("Nunca") Text("Pares") Text("De") Text("Aprender") }

Además, podemos usar Spacer para distribuir el espacio, y frame para definir dimensiones específicas.

¿Cómo funciona un HStack?

El HStack organiza elementos de manera horizontal, permitiendo que estos se dispongan uno al lado del otro. La implementación de un HStack es similar a la de un VStack pero con un enfoque horizontal:

HStack {
    Text("Nunca")
    Text("Pares")
    Text("De")
    Text("Aprender")
}

Al igual que el VStack, los atributos de alineación y espaciado pueden ser modificados. Un ejemplo de cómo podemos ajustar estos atributos es el siguiente:

HStack(alignment: .center, spacing: 20) {
    Text("Nunca")
    Text("Pares")
    Text("De")
    Text("Aprender")
}

¿Qué es un ZStack y cómo se utiliza?

El ZStack permite la superposición de elementos, colocando uno delante del otro. Es ideal para composiciones donde se desea un efecto de profundidad.

ZStack {
    Color.green
    Circle()
    Rectangle()
        .frame(width: 100, height: 100)
        .foregroundColor(.yellow)
    Text("Hello World")
}

En este código, el Color.green ocupa todo el espacio disponible, seguido por un Circle y un Rectangle, uno sobre otro. Cada elemento del ZStack puede alinearse utilizando directrices como top, bottom, leading, trailing, etc.

¿Cómo combinar diferentes stacks para crear vistas avanzadas?

Combinar diferentes tipos de stacks puede ser la clave para diseñar interfaces de usuario complejas y dinámicas. Se pueden anidar stacks dentro de otros para lograr el diseño deseado:

ZStack {
    HStack(spacing: 0) {
        Rectangle()
            .frame(width: 50, height: 100)
            .foregroundColor(.red)

        Rectangle()
            .frame(width: 50, height: 100)
            .foregroundColor(.yellow)
    }

    VStack {
        Text("Hello")
        Text("World")
    }
}

En este ejemplo, se utiliza un ZStack para crear una composición donde un HStack contiene dos rectángulos lado a lado, mientras que un VStack dentro del ZStack organiza dos textos uno encima del otro.

No olvides compartir tus creaciones con la comunidad y aprovechar los recursos proporcionados para seguir creciendo en tu aprendizaje.

Quise hacer un card de algún post de red social:

¿Dónde puedo encontrar la sección de recursos, no veo el botón?

Listo! ya se encuentra disponible el recurso =)

ZStack {

Color.black.edgesIgnoringSafeArea(.all)

VStack {

HStack(alignment: .center,spacing: 20) {

Text("Hello, World!").bold()

}.frame(width: 150,height: 40).padding(5).background(colorBlue).cornerRadius(10)

HStack {

Text("This is a example of a preview")

Image(systemName: "heart").foregroundStyle(.red)

}

}.frame(

width: 350,height: 50

).padding(20).background(.white).cornerRadius(20)

VStack(alignment: .center,spacing: 10) {

Image(systemName: "heart").foregroundStyle(.red).frame(maxWidth:.infinity,alignment: .trailing)

width: 350,height: 150

ZStack {
            Color.black.edgesIgnoringSafeArea(.all)
            VStack {
                
                HStack(alignment: .center,spacing: 20) {
                    VStack {
                        Text("Hello, World!").bold()
                    }.frame(width: 150,height: 40).padding(5).background(colorBlue).cornerRadius(10)
                    HStack {
                        Text("This is a example of a preview")
                        Image(systemName: "heart").foregroundStyle(.red)
                    }
                }.frame(
                    width: 350,height: 50
                ).padding(20).background(.white).cornerRadius(20)
                
                VStack(alignment: .center,spacing: 10) {
                    Image(systemName: "heart").foregroundStyle(.red).frame(maxWidth:.infinity,alignment: .trailing)
                    VStack {
                        
                        Text("Hello, World!").bold()
                    }.frame(width: 150,height: 40).padding(5).background(colorBlue).cornerRadius(10)
                    HStack {
                        Text("This is a example of a preview")
                        
                    }
                }.frame(
                    width: 350,height: 150
                ).padding(20).background(.white).cornerRadius(20)
                
            }
        }
```ZStack {

Color.black.edgesIgnoringSafeArea(.all)

VStack {



HStack(alignment: .center,spacing: 20) {

VStack {

Text("Hello, World!").bold()

}.frame(width: 150,height: 40).padding(5).background(colorBlue).cornerRadius(10)

HStack {

Text("This is a example of a preview")

Image(systemName: "heart").foregroundStyle(.red)

}

}.frame(

width: 350,height: 50

).padding(20).background(.white).cornerRadius(20)



VStack(alignment: .center,spacing: 10) {

Image(systemName: "heart").foregroundStyle(.red).frame(maxWidth:.infinity,alignment: .trailing)

VStack {



Text("Hello, World!").bold()

}.frame(width: 150,height: 40).padding(5).background(colorBlue).cornerRadius(10)

HStack {

Text("This is a example of a preview")



}

}.frame(

width: 350,height: 150

).padding(20).background(.white).cornerRadius(20)



}

}

Dejo aquí mi aporte, además de dejar el código por si alguien lo quiere replicar

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                ZStack {
                    Rectangle()
                        .fill(Color.gray.opacity(0.2))
                        .frame(width: 300, height: 100)
                        .cornerRadius(28)
                    
                    Image("CardBg")
                        .resizable()
                        .scaledToFill()
                        .frame(width: 300, height: 100)
                        .clipShape(RoundedRectangle(cornerRadius: 28))
                    
                    HStack {
                        Image(systemName: "bookmark.circle")
                            .resizable()
                            .foregroundStyle(Color.white)
                            .scaledToFit()
                            .frame(width: 30, height: 30)
                            .padding(.leading, 10)
                        
                        Spacer()
                        
                        Text("City Guide")
                            .font(.title2)
                            .foregroundStyle(Color.white)
                            .bold()
                            .padding()
                        
                        Button("Sign up", action: {})
                            .frame(width: 100, height: 50)
                            .background(Color.blue)
                            .cornerRadius(10)
                            .foregroundStyle(.white)
                            .padding()
                    }
                        .frame(width: 300, height: 100)
                        .multilineTextAlignment(.leading)
                }
            }
            
            .padding()
            
            ZStack {
                Rectangle()
                    .fill(Color.gray.opacity(0.2))
                    .frame(width: 300, height: 450)
                    .cornerRadius(28)
                
                Image("CardBg")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 300, height: 450)
                    .clipShape(RoundedRectangle(cornerRadius: 28))
                
                VStack {
                    Image(systemName: "bookmark.circle")
                        .resizable()
                        .foregroundStyle(Color.white)
                        .scaledToFit()
                        .frame(width: 30, height: 30)
                        .padding(.top, 10)
                    
                    Spacer()
                    
                    Text("City Guide")
                        .font(.title2)
                        .foregroundStyle(Color.white)
                        .bold()
                    
                    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit quam, bibendum et urna eget, aliquet sollicitudin odio. Cras a auctor ipsum, eu bibendum tellus.")
                        .foregroundStyle(Color.white)
                        .padding()
                    
                    Button("Sign up", action: {})
                        .frame(width: 250, height: 50)
                        .background(Color.blue)
                        .cornerRadius(10)
                        .foregroundStyle(.white)
                        .padding()
                }
                    .frame(width: 300, height: 450)
                    .multilineTextAlignment(.leading)
            }
        }
    }
}

//
//  ContentView.swift
//  Notes
//
//  Created by Kevin Andres Niño Guerrero on 9/04/26.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        ZStack(alignment: .leading) {
            Rectangle()
                .background(Color.secondary)
                .frame(width: 390, height: 200)
                .cornerRadius(10)
            HStack {
                Image("logo")
                    .resizable()
                    .frame(width: 150, height: 200)
                
                VStack(alignment: .leading, spacing: 0) {
                    Text("Absolute Batman II")
                        .foregroundStyle(.white)
                        .bold()
                    HStack(spacing: 2){
                        Image(systemName: "star.fill")
                            .resizable()
                            .frame(width: 10, height: 10)
                            .foregroundStyle(Color.yellow)
                        Image(systemName: "star.fill")
                            .resizable()
                            .frame(width: 10, height: 10)
                            .foregroundStyle(Color.yellow)
                        Image(systemName: "star.fill")
                            .resizable()
                            .frame(width: 10, height: 10)
                            .foregroundStyle(Color.yellow)
                        Image(systemName: "star.fill")
                            .resizable()
                            .frame(width: 10, height: 10)
                            .foregroundStyle(Color.yellow)
                        Image(systemName: "star.leadinghalf.filled")
                            .resizable()
                            .frame(width: 10, height: 10)
                            .foregroundStyle(Color.yellow)
                    }
                    
                    Text("Presenta a un Bruce Wayne de clase trabajadora, no millonario, que opera como un justiciero brutal, inmenso y práctico en Gotham City, sin depender de tecnología avanzada ni recursos heredados")
                        .foregroundStyle(Color.white)
                        .font(.system(size: 10))
                        .frame(width: 220)
                    
                    VStack(spacing: 0,){
                        Button("\(Image(systemName: "book.pages")) Ready for read?"){}
                            .frame(width: 200, height: 25)
                            .background(Color.red)
                            .cornerRadius(10)
                            .padding(10)
                            .font(.system(size: 10))
                            .foregroundStyle(Color.white)
                        
                        Button("\(Image(systemName: "tray")) Safe for latter"){}
                            .frame(width: 180, height: 25)
                            .background(Color.secondary)
                            .cornerRadius(10)
                            .font(.system(size: 10))
                            .foregroundStyle(Color.white)
                    }
                    
                }
            }
            Image(systemName: "suit.heart")
                .foregroundStyle(.red)
                .padding(15)
                .frame(width: 390, height: 200, alignment: .topTrailing)
        }

    }
}

#Preview {
    ContentView()
}

Pan pan pan para pa pan!

Hola. Parece que tengo el mismo problema con la seccion de recursos. ¿Donde puedo encontrarla?

Puedes ir a la sección de recursos de la clase anterior para obtener el reto.

Bueno, me entretuve haciendo esto:

Acá les dejo el código: import SwiftUI

struct ContentView: View {

var body: some View {

ZStack (alignment: .center){

// Background

Color.black.ignoresSafeArea(.all)

// Preview

Rectangle()

.fill(Color.white)

.cornerRadius(15)

HStack(spacing: 15) {

Image("Profile")

.resizable()

.cornerRadius(30)

.frame(width: 50, height: 50)

Text("Geronimo ha empezado a estudiar SwiftUI")

.font(.footnote)

.fontDesign(.monospaced)

Spacer()

HeartButton()

.padding(10)

.frame(width: 320, height: 80)

.padding(.bottom, 10)

// Completed

Image("Cover")

.frame(width: 320, height: 350)

// Interactions

VStack(alignment: .leading) {

Image(systemName: "message")

.foregroundStyle(.white)

.frame(width: 25, height: 25)

}.padding(.bottom, 5)

.frame(width: 30, height: 30)

.font(.caption)

.frame(maxWidth: .infinity, alignment: .leading)

.frame(width: 320, height: 50)

.frame(width: 320, height: 100)

#Preview {

ContentView()

/*preview 1*/
        HStack(spacing: 20) {
            Text("Hello, World!").frame(width: 150,height: 40).padding(5).background(.blue).cornerRadius(10)
            Text("This is a example of a preview")
            Image(systemName: "heart").foregroundStyle(.red)
            
        }
        
        /*preview 2*/
        ZStack(alignment: .center){
            VStack{
                Image(systemName: "heart").foregroundStyle(.red).frame(maxWidth:350,alignment: .trailing)
                HStack{
                    Text("Hello, World!").frame(width: 150,height: 40).padding(5).background(.blue).cornerRadius(10)
                }
                
                Text("This is a example of a preview")
            }
        }
```/\*

HStack(spacing: 20) {

Text("Hello, World!").frame(width: 150,height: 40).padding(5).background(.blue).cornerRadius(10)

Text("This is a example of a preview")

Image(systemName: "heart").foregroundStyle(.red)



}

\*/



ZStack(alignment: .center){

VStack{

Image(systemName: "heart").foregroundStyle(.red).frame(maxWidth:350,alignment: .trailing)

HStack{

Text("Hello, World!").frame(width: 150,height: 40).padding(5).background(.blue).cornerRadius(10)

}



Text("This is a example of a preview")

}

}

VStack(spacing: 20) {
            ZStack() {
                Rectangle()
                    .frame(height: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/)
                    .foregroundColor(.gray.opacity(0.2))
                    .cornerRadius(20)
                
                HStack(spacing: 20) {
                    ZStack() {
                        Rectangle()
                            .frame(width: 130,height: 40)
                            .foregroundColor(.blue.opacity(0.2))
                            .cornerRadius(10)
                        Text("Hola Mundo").bold()
                    }
                    
                    Text("Esto es una card pequeña, saludos")
                    
                    Image(systemName: "heart").foregroundColor(.red)
                }
            }
            
            ZStack() {
                Rectangle()
                    .frame(height: 150)
                    .foregroundColor(.gray.opacity(0.2))
                    .cornerRadius(20)
                
                VStack() {
                    VStack() {
                        HStack {
                            Spacer()
                            Image(systemName: "heart")
                                .foregroundColor(.red)
                                .padding(.trailing, 10) //
                                }
                        ZStack() {
                            Rectangle()
                                .frame(width: 130,height: 40)
                                .foregroundColor(.blue.opacity(0.2))
                                .cornerRadius(10)
                            Text("Hola Mundo").bold()
                        }
                    }
                    
                    
                    Text("Esto es una card pequeña, saludos")
                    
                }
            }
        }.padding()
```VStack(spacing: 20) {

ZStack() {

Rectangle()

.frame(height: /\*@START\_MENU\_TOKEN@\*/100/\*@END\_MENU\_TOKEN@\*/)

.foregroundColor(.gray.opacity(0.2))

.cornerRadius(20)



HStack(spacing: 20) {

ZStack() {

Rectangle()

.frame(width: 130,height: 40)

.foregroundColor(.blue.opacity(0.2))

.cornerRadius(10)

Text("Hola Mundo").bold()

}



Text("Esto es una card pequeña, saludos")



Image(systemName: "heart").foregroundColor(.red)

}

}



ZStack() {

Rectangle()

.frame(height: 150)

.foregroundColor(.gray.opacity(0.2))

.cornerRadius(20)



VStack() {

VStack() {

HStack {

Spacer()

Image(systemName: "heart")

.foregroundColor(.red)

.padding(.trailing, 10) //

}

ZStack() {

Rectangle()

.frame(width: 130,height: 40)

.foregroundColor(.blue.opacity(0.2))

.cornerRadius(10)

Text("Hola Mundo").bold()

}

}





Text("Esto es una card pequeña, saludos")



}

}

}.padding()

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Creación de Layouts Complejos con Stacks en SwiftUI

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos