Resolviendo el reto de contenedores

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

Alexander Soto

student•

En mi caso el Stack Vertical necesitaba de spacing: 0 para que quede igual que el reto

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

Iván Frías Gil

student•

A mi igual, seguro que es por la versión actualizada de xcode

Felipe Duarte De la Espriella

student•

Bro. gracias por el aporte, intenté de mil maneras que me quedara bien pero siempre ese spacing me dañaba el reto jajajaja me salvaste

andres neptaly meza vasquez

student•

a mi no me sale la opcion para cerrar ciertos codigos. sabes donde es ?

Gera Meraki

student•

También tuve la misma pregunta, te comparto el sitio donde encontré la solución (sale hasta abajo)

https://qastack.mx/programming/2834605/how-to-collapse-all-methods-in-xcode

dennis oswaldo saenz hernandez

student•

Yo activé esa opción en Xcode/Preferences/TextEditing y marcas la casilla code folding ribbon y ya me permitió colapsar código.

Yorman Orlando Colina Martinez

student•

GINO MUNOZ

student•

Carlos Arturo Pimentel

student•

Por qué el HStack no recibió los parámetros alineamiento del VStack padre al mover todo el contenido a la derecha ?, o quizá si lo está tomando ?

Johan Fabiel Casas Diaz

student•

Yo tengo una pregunta, en mi caso cuando use el spacer para llenar los spacios restantes de la pantalla me tubo encuenta toda la pantalla pero en el ejemplo que muestras, no lo hizo, es esto una configuration de la pantalla o que se debe esta diferencia?

Juan David Salazar Gil

student•

estuvo bueno el reto me demore al comienzo. peeero a medida que vas avanzando se va haciendo mas sencillo

import SwiftUI

struct Reto: View {
    var body: some View {
        
        // VStack principal
        VStack(spacing: 0) {
            
            VStack{
                // contenedor del texto 123
                Text("1").bold() .border(Color.black)
                Text("2").border(Color.black).bold()
                Text("3").border(Color.black)
                    .bold()
                
            }
            .frame(width: 200, height: 80,  alignment: .trailing)
                .background(Color.blue)
            
                
          // contenedor del texto A
            HStack(spacing: 0){
                    Text("A")
                    .bold()
                        .frame(width: 140, height: 100, alignment: .center)
                        .background(Color.red)
                    
                    Divider ()
                        .frame(width: 01, height: 100)
                        .background(Color.black)
                    
                    
                       // cotenedor dentro del contenedor A
                    HStack{
                        Text("B").border(Color.black)
                        Text("C").border(Color.black)
                    }.bold()
                    .frame(width: 57, height: 100, alignment: .top)
                    
                    .background(Color.red)
                    
                    
                    
                }//.border(Color.blue)
           
            
        }.border(Color.green) // VStack principal
        
        
    }
}

struct Reto_Previews: PreviewProvider {
    static var previews: some View {
        Reto()
    }
}

José Caballero

student•

A mi me quedo asi por si gustan ver una respuesta más

import SwiftUI

struct RetoStacks: View { let lbl0 = Text("1").font(.title) let lbl1 = Text("2").font(.title) let lbl2 = Text("3").font(.title) let lbl3 = Text("A").font(.title) let lbl4 = Text("B").font(.title) let lbl5 = Text("C").font(.title)

var body: some View {
    let vStack0 = VStack(spacing: 0) {
        self.lbl0.border(.black)
        self.lbl1.border(.black)
        self.lbl2.border(.black)
    }
    
    let hStack0 = HStack(alignment: .center) {
        self.lbl4.border(.black)
        self.lbl5.border(.black)
    }
    
    let hStack1 = HStack(alignment:.top) {
        self.lbl3.frame(width: 150,height: 150).background(.red).border(.black)
        
        hStack0.background(.red)
    }

    let vStack1 = VStack(alignment: .trailing,spacing: 0) {
        
        vStack0//123
        hStack1.border(.black).background(.red)//ABC
    }
    
    vStack1.background(.blue).border(.blue,width: 2)
}

}

struct retoStacks_Previews: PreviewProvider { static var previews: some View { //aqui se pueden añadir nuevas vistas que seran mostradas como si fuesen otras pantallas en el story board? o preview o spacers? Image("reto") RetoStacks() } }

Giancarlo Castañeda García

student•

orlando barria

student•

si me salió el 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)
                     
                    Text("B").border(Color.black)
                   
                    Text("C").border(Color.black)
                    
                }.background(Color.red)
            }.background(Color.blue)
        .frame(width: 200, height: 300, alignment: .center)
    
    
}

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

import SwiftUI

struct Reto: View {
    var body: some View {
        
        // VStack principal
        VStack(spacing: 0) {
            
            VStack{
                // contenedor del texto 123
                Text("1").bold() .border(Color.black)
                Text("2").border(Color.black).bold()
                Text("3").border(Color.black)
                    .bold()
                
            }
            .frame(width: 200, height: 80,  alignment: .trailing)
                .background(Color.blue)
            
                
          // contenedor del texto A
            HStack(spacing: 0){
                    Text("A")
                    .bold()
                        .frame(width: 140, height: 100, alignment: .center)
                        .background(Color.red)
                    
                    Divider ()
                        .frame(width: 01, height: 100)
                        .background(Color.black)
                    
                    
                       // cotenedor dentro del contenedor A
                    HStack{
                        Text("B").border(Color.black)
                        Text("C").border(Color.black)
                    }.bold()
                    .frame(width: 57, height: 100, alignment: .top)
                    
                    .background(Color.red)
                    
                    
                    
                }//.border(Color.blue)
           
            
        }.border(Color.green) // VStack principal
        
        
    }
}

struct Reto_Previews: PreviewProvider {
    static var previews: some View {
        Reto()
    }
}

var body: some View {
    let vStack0 = VStack(spacing: 0) {
        self.lbl0.border(.black)
        self.lbl1.border(.black)
        self.lbl2.border(.black)
    }
    
    let hStack0 = HStack(alignment: .center) {
        self.lbl4.border(.black)
        self.lbl5.border(.black)
    }
    
    let hStack1 = HStack(alignment:.top) {
        self.lbl3.frame(width: 150,height: 150).background(.red).border(.black)
        
        hStack0.background(.red)
    }

    let vStack1 = VStack(alignment: .trailing,spacing: 0) {
        
        vStack0//123
        hStack1.border(.black).background(.red)//ABC
    }
    
    vStack1.background(.blue).border(.blue,width: 2)
}

                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)
        .frame(width: 200, height: 300, alignment: .center)
    
}

Resolviendo el reto de contenedores

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