Honestamente pensaba que VStack era algo de View Stack, quedé como payaso cuando me di cuenta que es Vertical Stack jajaja
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
HStack, VStack y el elemento Spacer
15/22Recursos
Aportes 42
Preguntas 0
Ordenar por:
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)
}
```js
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)
}
}
```
```js
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()
}
}
Para Swift 5.0:
Para Swift 5.0:
![]()
reto
```js
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()
}
No me aparece el recurso
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)
}
 {
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)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?