No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
6H
1M
11S

HStack, VStack y el elemento Spacer

15/22
Recursos

Aportes 38

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

Me recuerda mucho a Row y Column de Flutter 馃槃

  • 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)
    }
No me aparece el recurso

Estoy aprendiendo que, al parecer, la capacidad de mostrar m煤ltiples vistas previas independientes en un solo canvas se elimin贸 en Xcode 14.

La informaci贸n la consult茅 de:

https://stackoverflow.com/a/73840700

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

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

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

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

![](

import SwiftUI

struct StacksDemo: View {
    var body: some View {
        
        VStack(alignment: .trailing, spacing: 0) {
            
            Text("1")
                .border(Color.black)
            Text("2")
                .border(Color.black)
            Text("3")
                .border(Color.black)

            HStack(alignment: .top) {
                Text("A").frame(width: 90, height: 90, alignment: .center)
                    .border(Color.black)
                HStack {
                    Text("B")
                        .border(Color.black)
                    Text("C")
                        .border(Color.black)
                }
            }.background(Color.red)
                .padding(0)
        }.border(Color.blue)
            .background(Color.blue)
            
    }
}
//
//  RetoPlatzi.swift
//  platzi
//
//  Created by Ray Amparo on 8/30/22.
//

import SwiftUI

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

struct RetoPlatzi_Previews: PreviewProvider {
    static var previews: some View {
        RetoPlatzi()
    }
}

//
// reto.swift
// PLATZI
//
// Created by Baudel Cervantes de la cruz on 8/7/22.
//

import SwiftUI

struct reto: 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: 100, height: 100, alignment: .center).border(Color.black)
            Text("B").border(Color.black).frame(width: 10, height: 100, alignment: .topTrailing)
            Text("C").border(Color.black).frame(width: 10, height: 100, alignment: .topTrailing)
        }.background(.red).border(Color.blue)
        
    }.background(.blue)
    
}

}

struct reto_Previews: PreviewProvider {
static var previews: some View {
reto()
}
}

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)