HStack, VStack y el elemento Spacer

Clase 15 de 22 • Curso de SwiftUI desde Cero (2021)

Andrés Antonio Azuara Portillo

student•

Honestamente pensaba que VStack era algo de View Stack, quedé como payaso cuando me di cuenta que es Vertical Stack jajaja

Gera Meraki

student•

Jajajaja no fuiste el único ntp 🤡

Daniela Lara

student•

Alfonso Patron

student•

Esa captura la hiciste con VSCODE? O hay alguna extensión para Xcode jajaja

Luis Carlos Garavito Romero

student•

@patronciitoo Puedes usar esta web, soporta varios lenguajes y tiene varios temas, incluido el de la imagen:

José Castillo

student•

Me recuerda mucho a Row y Column de Flutter 😄

Tulio Junior Rangel Nuñez

student•

Siiii, llevo todo el curso tratando de relacionar todo con Flutter para que se me haga más fácil de entender 😅

Juan Sebastián Vargas Castañeda

student•

Reto

// TODO: Reto 1. Hacer el diseño de la imagen llamada "reto".
        //
        VStack(alignment: .trailing)
        {
            Text("1").border(Color.black)
            Text("2").border(Color.black)
            Text("3").border(Color.black)
            
            HStack
            {
                Text("A").foregroundColor(.black)
                    .frame(width: 100, height: 100, alignment: .center)
                    .background(Color.red)
                    .border(Color.black)
                
                HStack(alignment: .top)
                {
                    Text("B").border(Color.black).background(Color.red)
                        .frame(width: 20, height: 100, alignment: .top)
                    Text("C").border(Color.black).background(Color.red)
                        .frame(width: 20, height: 100, alignment: .top)
                }
                
            }.background(Color.red)
        }.background(Color.blue)
        
    }
Algunas partes no son exactas a la solución oficial, pero así me quedó en mi primer intento :)

Isaac R. Hernández Sánchez

student•


    var body: some View{
        VStack(alignment: .trailing) {
            Text("1").border(Color.black)
            Text("2").border(Color.black)
            Text("3").border(Color.black)
 
            HStack(alignment: .top) {
                Text("A").frame(width: 150, height: 150, alignment: .center).border(Color.black)
                Text("B").border(Color.black)
                Text("C").border(Color.black)
            }
            .background(Color.red)
        }
        .font(.title)
        .foregroundColor(.black)
        .background(Color.blue)
    }

Rodrigo Consuelos

student•

struct Reto: View {
    var body: some View {
        VStack(alignment:.trailing,spacing: 0){
            
            ForEach(1..<4){index in
                Text(String(index)).border(.black)
            }.border(.blue)

            HStack(alignment:.top){
                Text("A").frame(width: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/,alignment: .center)
                    .border(.black)
                Text("B").border(.black)
                Text("C").border(.black)
            }.background(.red).border(.black)
        }.background(.blue).border(.blue)
    }
}

Rodrigo Consuelos

student•

var body: some View {
        VStack(alignment:.trailing,spacing: 0){
            
            ForEach(1..<4){index in
                Text(String(index)).border(.black)
            }

            HStack(alignment:.top){
                Text("A").frame(width: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/,alignment: .center)
                    .border(.black)
                Text("B").border(.black)
                Text("C").border(.black)
            }.background(.red).border(.black)
        }.background(.blue).border(.blue)
    }

Julian Villegas Ospina

student•

struct HstackVstackSpacer: View {
    var body: some View {
        VStack(alignment: .trailing, spacing: 0.0) {
            Text("1").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
            Text("2").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
            Text("3").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
            Divider().frame(width: 180, height: 3).background(Color.black)
        HStack(alignment: .top, spacing: 0.0) {
            Text("A").frame(width: 100, height: 100)
            Divider().frame(width: 3, height: 100).background(Color.black)
            Text("B").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/).frame(width: 50)
            Text("C").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
        }.background(Color.red)
                .padding(3)
        }.background(Color.blue)
            .font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/)
            .bold()
    }
}
```struct HstackVstackSpacer: View {

var body: some View {

VStack(alignment: .trailing, spacing: 0.0) {

Text("1").border(/\*@START\_MENU\_TOKEN@\*/Color.black/\*@END\_MENU\_TOKEN@\*/)

Text("2").border(/\*@START\_MENU\_TOKEN@\*/Color.black/\*@END\_MENU\_TOKEN@\*/)

Text("3").border(/\*@START\_MENU\_TOKEN@\*/Color.black/\*@END\_MENU\_TOKEN@\*/)

Divider().frame(width: 180, height: 3).background(Color.black)

HStack(alignment: .top, spacing: 0.0) {

Text("A").frame(width: 100, height: 100)

Divider().frame(width: 3, height: 100).background(Color.black)

Text("B").border(/\*@START\_MENU\_TOKEN@\*/Color.black/\*@END\_MENU\_TOKEN@\*/).frame(width: 50)

Text("C").border(/\*@START\_MENU\_TOKEN@\*/Color.black/\*@END\_MENU\_TOKEN@\*/)

}.background(Color.red)

.padding(3)

}.background(Color.blue)

.font(/\*@START\_MENU\_TOKEN@\*/.title/\*@END\_MENU\_TOKEN@\*/)

.bold()

}

}



![](https://static.platzi.com/media/user_upload/image-08e236c7-a5cd-4003-9722-43a1227eda6e.jpg)

Ricardo Lira de la Vega

student•

Para Swift 5.0:

Ricardo Lira de la Vega

student•

Para Swift 5.0:

Christians Bonilla

student•

reto

import SwiftUI

struct HstackVstackSpacer: View {
    var body: some View {
        
        VStack(alignment: .trailing,spacing: 0, content: {
            Text("1").border(.black)
            Text("2").border(.black)
            Text("3").border(.black)
            HStack(alignment: .top, content:
                {
                    Text("A").frame(width: 100,height: 100,alignment: .center)
                    Divider().frame(width: 2,height: 100).background(.black)
                    Text("B").border(.black)
                    Text("C").border(.black)
                }
            ).background(.red)
        }) .border(.blue).background(.blue)
        
        
    }
}

#Preview {
    
    HstackVstackSpacer()
}

```**import** SwiftUI



**struct** HstackVstackSpacer: View {

**var** body: **some** View {



VStack(alignment: .trailing,spacing: 0, content: {

Text("1").border(.black)

Text("2").border(.black)

Text("3").border(.black)

HStack(alignment: .top, content:

{

Text("A").frame(width: 100,height: 100,alignment: .center)

Divider().frame(width: 2,height: 100).background(.black)

Text("B").border(.black)

Text("C").border(.black)

}

).background(.red)

}) .border(.blue).background(.blue)





}

}



\#Preview {



HstackVstackSpacer()

}

Juan Bernardo Henao Orozco

student•

No me aparece el recurso

Andrea stefanny García mejia

student•

Jairo Toro

student•

Reto:

struct ChallengeView: View {
    var body: some View {
        VStack(alignment: .trailing) {
            Text("1").border(.black).font(.title2)
            Text("2").border(.black).font(.title2)
            Text("3").border(.black).font(.title2)
            HStack(alignment: .top) {
                Text("A")
                    .frame(width: 150, height: 150, alignment: .center)
                    .border(.black).font(.title2)
                Text("B").border(.black)
                Text("C").border(.black)
            }.background(Color.red)
        }.frame(alignment: .trailing).background(Color.blue).border(.blue)
    }
}

Jesus Moises Bautista Romero

student•

Cesar Dominguez

student•

Mi código para el reto

struct StacksMod: View {
    var body: some View {
        VStack(alignment: .trailing) {
            
            Text("1").border(.black)
            Text("2").border(.black)
            Text("3").border(.black)
            
            HStack(alignment: .top) {
                Text("A").frame(width: 100,height: 100,alignment: .center).border(.black)
                Text("B").border(.black)
                Text("C").border(.black)
            }.background(.red)
            
        }.background(.blue)
    }
}

Diego Fernando Guzmán Rodríguez

student•

Acá mi aporte!

struct HStacks: View {
    var body: some View {

        VStack(alignment: .trailing){
            Text("1").border(Color.black)
            Text("2").border(Color.black)
            Text("3").border(Color.black)
            
            HStack(){
                Text("A").frame(width: 200, height: 200, alignment: .center).border(Color.black)
                HStack(alignment: .top){
                    Text("B").border(Color.black)
                    Text("C").border(Color.black)
                }.padding(.bottom, 160)

            }.background(Color.red).frame(width: 250, height: 200).border(Color.purple)
            
        }
        .background(Color.blue)
        .frame(width: 250,height: 320)
        .border(Color.green)
        .font(.title)
    }
}

Michell Excellent

student•

!Challenge

struct HVStackChallenge: View {
    var body: some View {
        VStack(alignment: .trailing) {
            VStack {
                Text("1")
                    .bold()
                    .border(.black)
                Text("2")
                    .bold()
                    .border(.black)
                Text("3")
                    .bold()
                    .border(.black)
            }.frame(
                width: 200.0,
                height: 53.0,
                alignment: .topTrailing
            )
            HStack {
                Text("A")
                    .padding(.all, 10.0)
                    .frame(
                        width: 200.0,
                        height: .infinity,
                        alignment: .center
                    )
                Divider()
                    .frame(
                        width: 1.5,
                        height: 175.0,
                        alignment: .center
                    )
                    .foregroundColor(.black)
                    .background(.black)
                HStack(alignment: .top) {
                    Text("B")
                        .bold()
                        .border(.black)
                    Text("C")
                        .bold()
                        .border(.black)
                }.frame(
                    width: 40.0,
                    height: 175.0,
                    alignment: .topTrailing
                )
            }
            .border(.blue)
            .background(.red)
        }
        .background(.blue)
    }
}

Ulises Serrano Pérez

student•

Yo lo resolvi de la siguiente manera.

struct HStackVStackSpacer: View {
    var body: some View {
        VStack(alignment:.trailing) {
            Text("1")
                .border(.black)
            Text("2")
                .border(.black)
            Text("3")
                .border(.black)
            HStack(alignment: .top){
                Text("A")
                    .frame(width: 100, height: 100, alignment: .center)
                    .border(.black)
                HStack {
                    Text("B")
                        .border(.black)
                    Text("C")
                        .border(.black)
                }
            }
            .background(Color.red)
        }
        .background(Color.blue)
    }
}

dennis oswaldo saenz hernandez

student•

var body: some View {

    VStack(alignment: .trailing ) {
        Text("1").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
        Text("2").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
        Text("3").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
        
        HStack(alignment: .top ){
            Text("A").frame(width: 120,
                                 height: 120,
                                 alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                                .border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
            
            HStack(alignment: .center ){
                Text("B").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
                Text("C").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
            }
            
        }.background(Color.red)
    }.border(Color.blue).background(Color.blue)
    
}

Alan Maldonado

student•

![](

// TODO: Reto 1. Hacer el diseño de la imagen llamada "reto".
        //
        VStack(alignment: .trailing)
        {
            Text("1").border(Color.black)
            Text("2").border(Color.black)
            Text("3").border(Color.black)
            
            HStack
            {
                Text("A").foregroundColor(.black)
                    .frame(width: 100, height: 100, alignment: .center)
                    .background(Color.red)
                    .border(Color.black)
                
                HStack(alignment: .top)
                {
                    Text("B").border(Color.black).background(Color.red)
                        .frame(width: 20, height: 100, alignment: .top)
                    Text("C").border(Color.black).background(Color.red)
                        .frame(width: 20, height: 100, alignment: .top)
                }
                
            }.background(Color.red)
        }.background(Color.blue)
        
    }
Algunas partes no son exactas a la solución oficial, pero así me quedó en mi primer intento :)

    var body: some View{
        VStack(alignment: .trailing) {
            Text("1").border(Color.black)
            Text("2").border(Color.black)
            Text("3").border(Color.black)
 
            HStack(alignment: .top) {
                Text("A").frame(width: 150, height: 150, alignment: .center).border(Color.black)
                Text("B").border(Color.black)
                Text("C").border(Color.black)
            }
            .background(Color.red)
        }
        .font(.title)
        .foregroundColor(.black)
        .background(Color.blue)
    }

struct Reto: View {
    var body: some View {
        VStack(alignment:.trailing,spacing: 0){
            
            ForEach(1..<4){index in
                Text(String(index)).border(.black)
            }.border(.blue)

            HStack(alignment:.top){
                Text("A").frame(width: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/,alignment: .center)
                    .border(.black)
                Text("B").border(.black)
                Text("C").border(.black)
            }.background(.red).border(.black)
        }.background(.blue).border(.blue)
    }
}

var body: some View {
        VStack(alignment:.trailing,spacing: 0){
            
            ForEach(1..<4){index in
                Text(String(index)).border(.black)
            }

            HStack(alignment:.top){
                Text("A").frame(width: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/,alignment: .center)
                    .border(.black)
                Text("B").border(.black)
                Text("C").border(.black)
            }.background(.red).border(.black)
        }.background(.blue).border(.blue)
    }

struct HstackVstackSpacer: View {
    var body: some View {
        VStack(alignment: .trailing, spacing: 0.0) {
            Text("1").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
            Text("2").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
            Text("3").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
            Divider().frame(width: 180, height: 3).background(Color.black)
        HStack(alignment: .top, spacing: 0.0) {
            Text("A").frame(width: 100, height: 100)
            Divider().frame(width: 3, height: 100).background(Color.black)
            Text("B").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/).frame(width: 50)
            Text("C").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
        }.background(Color.red)
                .padding(3)
        }.background(Color.blue)
            .font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/)
            .bold()
    }
}
```struct HstackVstackSpacer: View {

var body: some View {

VStack(alignment: .trailing, spacing: 0.0) {

Text("1").border(/\*@START\_MENU\_TOKEN@\*/Color.black/\*@END\_MENU\_TOKEN@\*/)

Text("2").border(/\*@START\_MENU\_TOKEN@\*/Color.black/\*@END\_MENU\_TOKEN@\*/)

Text("3").border(/\*@START\_MENU\_TOKEN@\*/Color.black/\*@END\_MENU\_TOKEN@\*/)

Divider().frame(width: 180, height: 3).background(Color.black)

HStack(alignment: .top, spacing: 0.0) {

Text("A").frame(width: 100, height: 100)

Divider().frame(width: 3, height: 100).background(Color.black)

Text("B").border(/\*@START\_MENU\_TOKEN@\*/Color.black/\*@END\_MENU\_TOKEN@\*/).frame(width: 50)

Text("C").border(/\*@START\_MENU\_TOKEN@\*/Color.black/\*@END\_MENU\_TOKEN@\*/)

}.background(Color.red)

.padding(3)

}.background(Color.blue)

.font(/\*@START\_MENU\_TOKEN@\*/.title/\*@END\_MENU\_TOKEN@\*/)

.bold()

}

}



![](https://static.platzi.com/media/user_upload/image-08e236c7-a5cd-4003-9722-43a1227eda6e.jpg)

import SwiftUI

struct HstackVstackSpacer: View {
    var body: some View {
        
        VStack(alignment: .trailing,spacing: 0, content: {
            Text("1").border(.black)
            Text("2").border(.black)
            Text("3").border(.black)
            HStack(alignment: .top, content:
                {
                    Text("A").frame(width: 100,height: 100,alignment: .center)
                    Divider().frame(width: 2,height: 100).background(.black)
                    Text("B").border(.black)
                    Text("C").border(.black)
                }
            ).background(.red)
        }) .border(.blue).background(.blue)
        
    }
}

#Preview {
    
    HstackVstackSpacer()
}

```**import** SwiftUI

**struct** HstackVstackSpacer: View {

**var** body: **some** View {

VStack(alignment: .trailing,spacing: 0, content: {

Text("1").border(.black)

Text("2").border(.black)

Text("3").border(.black)

HStack(alignment: .top, content:

{

Text("A").frame(width: 100,height: 100,alignment: .center)

Divider().frame(width: 2,height: 100).background(.black)

Text("B").border(.black)

Text("C").border(.black)

}

).background(.red)

}) .border(.blue).background(.blue)

}

}

\#Preview {

HstackVstackSpacer()

}

struct ChallengeView: View {
    var body: some View {
        VStack(alignment: .trailing) {
            Text("1").border(.black).font(.title2)
            Text("2").border(.black).font(.title2)
            Text("3").border(.black).font(.title2)
            HStack(alignment: .top) {
                Text("A")
                    .frame(width: 150, height: 150, alignment: .center)
                    .border(.black).font(.title2)
                Text("B").border(.black)
                Text("C").border(.black)
            }.background(Color.red)
        }.frame(alignment: .trailing).background(Color.blue).border(.blue)
    }
}

struct StacksMod: View {
    var body: some View {
        VStack(alignment: .trailing) {
            
            Text("1").border(.black)
            Text("2").border(.black)
            Text("3").border(.black)
            
            HStack(alignment: .top) {
                Text("A").frame(width: 100,height: 100,alignment: .center).border(.black)
                Text("B").border(.black)
                Text("C").border(.black)
            }.background(.red)
            
        }.background(.blue)
    }
}

struct HStacks: View {
    var body: some View {

        VStack(alignment: .trailing){
            Text("1").border(Color.black)
            Text("2").border(Color.black)
            Text("3").border(Color.black)
            
            HStack(){
                Text("A").frame(width: 200, height: 200, alignment: .center).border(Color.black)
                HStack(alignment: .top){
                    Text("B").border(Color.black)
                    Text("C").border(Color.black)
                }.padding(.bottom, 160)

            }.background(Color.red).frame(width: 250, height: 200).border(Color.purple)
            
        }
        .background(Color.blue)
        .frame(width: 250,height: 320)
        .border(Color.green)
        .font(.title)
    }
}

struct HVStackChallenge: View {
    var body: some View {
        VStack(alignment: .trailing) {
            VStack {
                Text("1")
                    .bold()
                    .border(.black)
                Text("2")
                    .bold()
                    .border(.black)
                Text("3")
                    .bold()
                    .border(.black)
            }.frame(
                width: 200.0,
                height: 53.0,
                alignment: .topTrailing
            )
            HStack {
                Text("A")
                    .padding(.all, 10.0)
                    .frame(
                        width: 200.0,
                        height: .infinity,
                        alignment: .center
                    )
                Divider()
                    .frame(
                        width: 1.5,
                        height: 175.0,
                        alignment: .center
                    )
                    .foregroundColor(.black)
                    .background(.black)
                HStack(alignment: .top) {
                    Text("B")
                        .bold()
                        .border(.black)
                    Text("C")
                        .bold()
                        .border(.black)
                }.frame(
                    width: 40.0,
                    height: 175.0,
                    alignment: .topTrailing
                )
            }
            .border(.blue)
            .background(.red)
        }
        .background(.blue)
    }
} 

struct HStackVStackSpacer: View {
    var body: some View {
        VStack(alignment:.trailing) {
            Text("1")
                .border(.black)
            Text("2")
                .border(.black)
            Text("3")
                .border(.black)
            HStack(alignment: .top){
                Text("A")
                    .frame(width: 100, height: 100, alignment: .center)
                    .border(.black)
                HStack {
                    Text("B")
                        .border(.black)
                    Text("C")
                        .border(.black)
                }
            }
            .background(Color.red)
        }
        .background(Color.blue)
    }
}

    VStack(alignment: .trailing ) {
        Text("1").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
        Text("2").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
        Text("3").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
        
        HStack(alignment: .top ){
            Text("A").frame(width: 120,
                                 height: 120,
                                 alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                                .border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
            
            HStack(alignment: .center ){
                Text("B").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
                Text("C").border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
            }
            
        }.background(Color.red)
    }.border(Color.blue).background(Color.blue)
    
}

HStack, VStack y el elemento Spacer

Introducción a SwiftUI

¿Qué es SwiftUI?

Instalación de Xcode

Uso y características de Xcode

Las bases de Swift para SwiftUI

Variables y constantes

Funciones y argument labels

Structs, propiedades y métodos

Diferencia entre struct y class

Computed properties

Las bases de SwiftUI e introducción a protocolos

Vistas y controles

¿Qué son las vistas y controles en SwiftUI?

Botones

Imágenes

Campos de texto y el property wrapper @state

Divisores

Contenedores de interfaz de usuario

HStack, VStack y el elemento Spacer

Resolviendo el reto de contenedores

ZStack y el modificador padding

Dividir la app en módulos de contenedores

Más vistas y controles

TabView

NavigationView, NavigationLink e introducción a múltiples pantallas

VideoPlayer

Las posibilidades de SwiftUI

Las posibilidades de SwiftUI