No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

HStack, VStack y el elemento Spacer

15/22
Recursos

Aportes 24

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Me recuerda mucho a Row y Column de Flutter 😄

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

  • 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 :)

    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)
    }
import SwiftUI

struct StacksMode: View {
    var body: some View {
        VStack(alignment:.trailing){
            VStack(alignment: .trailing){
                Text("1").border(Color.black)
                Text("2").border(Color.black)
                Text("3").border(Color.black)
            }.frame(width: 200, height: 65, alignment: .trailing).background(Color.blue)
            
            HStack{
                VStack{
                    Text("A")
                }.frame(width: 149, height: 132, alignment: .center).background(Color.red).border(Color.blue)
                HStack{
                    Text("B").border(Color.blue)
                    Text("C").border(Color.blue)
                }.frame(width: 40, height: 132, alignment: .topTrailing).background(Color.red)
            }.frame(width: 200, height: 125, alignment: .bottom)
        }.border(Color.green).frame(width: 200, height: 200, alignment: .center).background(Color.red)
    }
}

struct StacksMode_Previews: PreviewProvider {
    static var previews: some View {
        StacksMode()
    }
}
struct TextModifiers: View {
    @State var textView : String = "Hello World"
    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(Color.red)
        }.background(Color.blue)
    }
    
}
VStack(alignment: .trailing){
            VStack{
                Text("1").border(.black)
                Text("2").border(.black)
                Text("3").border(.black)
            }.background(.blue).padding(.bottom, -8)
            HStack(alignment:.top){
                Text("A").padding(.all, 50.0).border(.black)
                Text("B").border(.black)
                Text("C").border(.black)
            }.background(.red).border(.blue)
        }.background(.blue)

Reto terminado 💚

struct Practicando: View {
    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: 100, height: 100, alignment: .center).border(Color.black)
                Text("B").border(Color.black)
                Text("C").border(Color.black)
            }.background(Color.red)
        }.background(.blue).border(Color.black)
        
        
        
        
    }
}

wow me encanta swfit UI es como css pero super facil y simple 💚

Mi aporte al reto

Código

import SwiftUI

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

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

Resultado

import SwiftUI

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

struct someView_Previews: PreviewProvider {
    static var previews: some View {
        someView()
            
    }
}

Reto:

        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: 100,
                        height: 100,
                        alignment: .center
                    )
                    .border(Color.black)
                HStack {
                    Text("B")
                        .border(Color.black)
                    Text("C")
                        .border(Color.black)
                }
            }.background(Color.red)
            .border(Color.blue)
        }.background(Color.blue)
import SwiftUI

struct HstackVstckSpacer: View {
    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: 100, height: 100, alignment: .center).border(Color.black)
                Text("B").border(Color.black)
                Text("C").border(Color.black)
                
            }.background(Color.red)
        }.background(Color.blue)
        
    }
}
struct Reto: View {
    var body: some View {
        
        VStack{
            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).border(.blue)
                    
            }.background(.blue)
            
    }
    }
        
}

Reto

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

import SwiftUI

struct HStackVStackSpacer: View {
    var body: some View {
        VStack{
            VStack{
                Text("A").border(Color.black)
                Text("B").border(Color.black)
                Text("C").border(Color.black)
            }.frame(width: 200, height: 80, alignment: .trailing)
            .background(Color.blue)
            HStack{
                Text("A").frame(width: 140, height: 140)
                HStack{
                    Text("B").border(Color.black)
                    Text("C").border(Color.black)
                }.frame(width: 60, height: 140, alignment: .top)
            }.frame(width: 200, height: 140)
            .background(Color.red)
            
        }.frame(width: 200, height: 220)
    }
}

struct HStackVStackSpacer_Previews: PreviewProvider {
    static var previews: some View {
        HStackVStackSpacer()
    }
}

me recuerda mucho a desarrollo web

Aca les dejo el resultado del reto:

import SwiftUI

struct HStackVStackSpacer: View {
    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)
         .border(Color.blue)
         .background(Color.blue)
        
    }
}

struct HStackVStackSpacer_Previews: PreviewProvider {
    static var previews: some View { 
        HStackVStackSpacer()
    }
}
VStack(alignment: .trailing)  {
    // 1st contenedor
    VStack{
        Text("1").foregroundColor(.black).border(Color.black, width: 1)
        Text("2").foregroundColor(.black).border(Color.black, width: 1)
        Text("3").foregroundColor(.black).border(Color.black, width: 1)
    }
    // 2nd contenedor
    HStack(alignment: .top){
        Text("A").frame(width: 100, height: 100, alignment: .center).border(Color.black, width: 1)
        Text("B").border(Color.black, width: 1)
        Text("C").border(Color.black, width: 1)
    }.background(Color.red)
    
}.border(Color.blue, width: 1).background(Color.blue)

Aquí está mi reto

struct HorizontalStack: View {
    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: 100, height: 100, alignment: .center)
                    .border(Color.black)
                
                Text("B").border(Color.black)
                Text("C").border(Color.black)
            }
            .background(Color.red)
            .border(Color.black)
            
        }
        .background(Color.blue)
    }
}
        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: 100, height: 100, alignment: .center).border(Color.black)
                Text("B").border(Color.black)
                Text("C").border(Color.black)
            }.background(Color.red)
            
        }.background(Color.blue)