Spacer y ZStack
Parte de la sección Introducción a SwiftUI del Journey de Swift de Coddy. Lección 12 de 50.
Un Spacer ocupa todo el espacio libre de una pila. En un HStack, empuja las vistas que tiene delante hacia la izquierda y las vistas que tiene detrás hacia la derecha:
HStack {
Text("Total")
Spacer()
Text("$12.50")
}En un VStack, un Spacer separa las vistas verticalmente.
ZStack apila las vistas una encima de otra. La primera vista queda al fondo y cada una de las siguientes se coloca encima:
ZStack {
Color.blue
Text("On top")
.foregroundStyle(.white)
}Color.blue usado como vista ocupa todo el espacio que se le asigna, así que aquí se convierte en un fondo azul detrás del texto.
Desafío
FácilHaz que la fila del total abarque todo el ancho: añade un Spacer entre Total y $12.50 para que el precio se desplace hasta el borde derecho.
Pruébalo tú mismo
import SwiftUI
@main
struct CoddyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Introducción a SwiftUI
2Mostrar contenido
Vistas de textoNúmeros en el textoFuentesColoresSF SymbolsRepaso: etiqueta de precioPractica por tu cuenta: Playground de Swift