ZStack y el modificador padding

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

Clase anteriorSiguiente clase

Murray Walker Greer Cifuentes

student•

a Juan le hace falta conocer más como funciona el ZStack... debería tomar un curso en Platzi

Iván Frías Gil

student•

Al fin vemos una forma de superponer componentes para crear diferentes vistas

Fernando Florez

student•

Por qué agregas aspectRatio si igual definirás las dimensiones con frame? He removido el aspect ratio y no he visto cambio alguno. Es realmente necesario?

Juan Villalvazo

teacher•

Muchas veces es tan solo por buena practica, pero en este caso si lo veo necesario ya que que tal si cambias de imagen y no se adapta bien con el puro cambio de dimensiones. Saludos : )

Gino Alejandro Limo Garcia

student•

Hola Fernando, yo coloqué una imagen rectangular y, si no le ponía el aspectRatio, se convertía en un cuadrado al tener el mismo valor en width y en height. Así que el aspectRatio permitió que siguiera siendo un rectángulo aunque tuviera el mismo valor el ancho y alto.

Gino Alejandro Limo Garcia

student•

Al final del video el texto en color azul queda en el centro de la aplicación en lugar de estar en la misma posición del TextField, para esto, le agregué unos modificadores al Text y así quedó como debería

ZStack {
    if curso == ""{
                        
       Text("Curso").foregroundColor(Color.blue)
              .frame(maxWidth: .infinity, alignment: .leading)
              .padding(.leading, 8.0)
    }
    TextField("", text: $curso).padding(.leading, 8.0)
 }

Michell Excellent

student•

!Jake ZStack

import SwiftUI

struct ZStacks: View {
    var body: some View {
        ZStack {
            Color.purple
            VStack {
                Image("jake")
                    .resizable()
                    .frame(
                        width: .infinity,
                        height: 500.0
                    )
                Text("Hi, I'm Jake the magic dog.")
                    .bold()
                    .foregroundColor(.white)
                    .font(.largeTitle)
                    .padding([.leading, .trailing], 6.0)
                    
            }
        }.ignoresSafeArea()
    }
}

struct ZStacks_Previews: PreviewProvider {
    static var previews: some View {
        ZStacks()
    }
}

Andy Antonio Paz Cambara

student•

Dios!!! cada clase me enamoro mas de swift UI 🥺

Nanet Taboada Frias

student•

Que fácil de diseñar en SwiftUI :D

Jhon Salguero

student•

¡Hacer aplicaciones con Swift UI es hermoso!

Aldo David Garcia Garduño

student•

alguien sabe si ya hay una forma ya de acceder al placeholder de un texfield? alguna libreria o api?

Juan Villalvazo

teacher•

Hola compañero : ) Actualmente no hay una api publica para ello pero se espera que en la nueva versión de finales de año se incluya. Saludos

Joaquin Segovia

student•

tienen actualización de esto??

Felipe Andres Sánchez Gomez

student•

El padding que definimos aqui funciona por pixeles?

Stiven Castillo Montero

student•

No sé como editar el valor del textfield directamente desde el preview, como hago?

Joaquin Segovia

student•

Yo intente tocando el botón que aparece al lado del circulo Verde Preview, el que parece un icono de play dentro de un circulo, parece que cambia a reconocer una manito pero no pude, simplemente uso el simulador corriéndolo desde arriba a la izquierda con el play

Rodrigo Consuelos

student•

Para que Text("Curso") está a la izquierda como TextField:ZStack{

ZStack{
    if (curso.isEmpty){
      Text("Curso").frame(maxWidth: .infinity,alignment: .leading)
      }
      TextField("",text:$curso)
  }.padding(.leading,8)

if (curso.isEmpty){

Text("Curso").frame(maxWidth: .infinity,alignment: .leading)

}

TextField("",text:$curso)

}.padding(.leading,8)

Nicolas Silva

student•

hice una busqueda super rapida y hay una forma mucho mas simple de cambiar el color del placeholder del textfield, aun asi, me parece absurdo que no sea posible nativamente acceder a esa api

ZStack {
    if curso == ""{
                        
       Text("Curso").foregroundColor(Color.blue)
              .frame(maxWidth: .infinity, alignment: .leading)
              .padding(.leading, 8.0)
    }
    TextField("", text: $curso).padding(.leading, 8.0)
 }

import SwiftUI

struct ZStacks: View {
    var body: some View {
        ZStack {
            Color.purple
            VStack {
                Image("jake")
                    .resizable()
                    .frame(
                        width: .infinity,
                        height: 500.0
                    )
                Text("Hi, I'm Jake the magic dog.")
                    .bold()
                    .foregroundColor(.white)
                    .font(.largeTitle)
                    .padding([.leading, .trailing], 6.0)
                    
            }
        }.ignoresSafeArea()
    }
}

struct ZStacks_Previews: PreviewProvider {
    static var previews: some View {
        ZStacks()
    }
}

ZStack y el modificador padding

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