En este tutorial explicamos que es un Stack en Swiftui y sus 3 principales variantes (VStack, HStack y ZStack). Con estas vistas podemos apilar hasta 10 elementos ya sea en horizontal, vertical o por profundidad.
Resumen rápido Swift Stack view.
En este resumen rápido explicamos lo más básico de cada tipo de Stack en Swift.
Cualquiera de estos elementos admite como máximo 10 elementos dentro, pero se pueden combinar entre ellos.
- VStack, usa una orientación Vertical, tiene como límite hasta 10 vistas, los elementos se acomodarán uno debajo del otro, de arriba hacia abajo.
- HStack, con este podemos apilar hasta 10 vistas de manera Horizontal uno enseguida de otro de izquierda a derecha.
- ZStack, este organiza en cuanto a profundidad se refiere, uno encima del otro, también se pueden máximo 10 vistas.
Así es la declaración típica, los elementos que contienen no necesitan separarse por comas o algún símbolo.
HStack {
Text(“Primer Texto”).background(Color.yellow)
Text(“Segundo Texto”).background(Color.yellow)
Text(“Tercer Texto”).background(Color.yellow)
}.background(Color.blue)
Tienen dos parámetros opcionales donde se elige la alineación y el espacio entre los elementos. Estos se agregan en un paréntesis al declarar el Stack.
Al final de cada elemento se pueden agregar diversos parámetros como Padding, background, etc.
HStack(alignment: .center, spacing: 0) {
Text(“Primer Texto”).background(Color.yellow)
Text(“Segundo Texto”).background(Color.yellow)
Text(“Tercer Texto”).background(Color.yellow)
}.padding(20).background(Color.blue)
Además es posible combinar varios de estos elementos en una misma vista.
Ejemplo de VStack en Swiftui.
En este ejemplo usaremos la vista VStack de SwiftIU para ordenar algunos elementos de manera Vertical.
Primero Ordenamos 3 textos.
struct ContentView: View {
var body: some View{
VStack(alignment: .center, spacing: 20){
Text(“Primer Texto”).background(Color.yellow)
Text(“Segundo Texto”).background(Color.yellow)
Text(“Tercer Texto”).background(Color.yellow)
}.padding(20).background(Color.blue)
}
}
Ahora vamos a ordenar 3 elementos diferentes. Los elementos serán un Texto, un Texto editable y un botón.
struct ContentView: View {
@State var nn = "0"
var body: some View{
VStack(alignment: .center, spacing: 20){
Text(“Primer Texto”).background(Color.yellow)
TextField(“Escribe algo”, text: $nn).background(Color.white)
Button(action: { accion() }, label:{
Text(“Calcular”).frame(width:250, height:40, alignment: ,center)
.background(Color.yellow)
.foregroundColor(.white)
.cornerRadius(8) }).padding(5)
}.padding(12).background(Color.blue)
}
}Para este VStack alineamos hacia el centro todos los elementos y le damos una separación de 20.
Luego agregamos los 3 elementos que contendrá, que son un Texto, un TextField y un Botón, en ese orden.
La variable “nn” se us ya que el TextField necesita una variable para ahí guardar el valor que ingrese el usuario.
Por ultimo damos un padding de 12. Y este es el resultado:
Ejemplo de HStack en Swift ui.
En este ejemplo usaremos la vista HStack de SwiftIU para ordenar 3 elementos, solo que ahora se ordenaran de forma Horizontal.
Los elementos serán 3 textos, usamos un color de fondo amarillo para ver l zona que ocupa cada texto.
HStack(alignment: .center, spacing: 0) {
Text(“Primer Texto”).background(Color.yellow)
Text(“Segundo Texto”).background(Color.yellow)
Text(“Tercer Texto”).background(Color.yellow)
}.padding(20).background(Color.blue)En el código anterior usamos un HStack para alinear horizontalmente los elementos, la separación es de cero (0) por eso están juntos todos los Textos.
Después colocamos todos los elementos que contendrá en el orden en que queremos que se muestren.
Por ultimo damos un padding de 20 y un color de fondo a todo el HStack color Azul. Y este es el resultado:
Ejemplo de ZStack en Swiftui.
Para el caso de ZStack usaremos solo dos elementos. Una imagen y un Texto.
Recodamos que este acomoda en profundidad, por lo que el objetivo es colocar el Texto sobre la Imagen.
struct ContentView: View {
var body: some View{
ZStack{
Image(systemName: “bubble.left”)
.resizable()
.frame(width: 200.0, height: 200.0)
Text(“Ejemplo ZStack Swift ui”)
}
}
}- Primero creamos el ZStack.
- Luego creamos una imagen dentro del ZStack, usaremos la imagen del sistema llamada “bubble.left”, a esta imagen le daremos un tamaño de 200 por 200.
- Después agregamos un Texto.
La imagen la pusimos primero, por lo tanto será el elemento de más al fondo, así que veremos el texto sobre la imagen. Así se vería:
Podemos ordenar e texto usando el parámetro alignment y la posición donde queremos que empiece: top, bottom, center, leading y mas.
struct ContentView: View {
var body: some View{
ZStack(alignment: ,leading){
Image(systemName: “bubble.left”)
.resizable()
.frame(width: 200.0, height: 200.0)
Text(“Ejemplo ZStack Swift ui”)
}
}
}Así se vería:
Para más tutoriales de Siwft ve a este enlace.
Algunos temas que te pueden interesar:
Swift, convertir tipos de variables (String, float, int y double)