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 en una pila. En un HStack, empuja las vistas que están antes hacia la izquierda y las que están después hacia la derecha:
HStack {
Text("Total")
Spacer()
Text("$12.50")
}En un VStack, un Spacer separa las vistas verticalmente.
ZStack apila las vistas unas sobre otras. La primera vista queda al fondo y cada una de las siguientes se coloca encima:
ZStack {
Color.blue
Text("On top")
.foregroundStyle(.white)
}Cuando se usa Color.blue 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 SwiftUI