Filas con HStack
Coloque las vistas una junto a otra horizontalmente.
Filas con HStack es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Going Horizontal
Sometimes views belong side by side, not stacked down. For that you reach for the horizontal sibling of VStack. ➡️
Meet HStack
An HStack arranges its children horizontally, left to right. It is perfect for rows like an icon next to a label.
Your First HStack
Put views inside the HStack braces and they line up across the screen in the order you wrote them.
HStack {
Text("Left")
Text("Right")
}Left to Right Order
In an HStack the first child sits on the leading edge and later children follow toward the trailing edge. Code order is left-to-right order.
Icon Plus Label
A classic HStack pairs an Image with a Text so an icon and its caption stay on one line, like a row in a settings screen.
HStack {
Image(systemName: "bell")
Text("Alerts")
}Centered Vertically
By default an HStack aligns its children to the vertical center, so a tall image and short text line up neatly along their middles.
HStack Hugs Its Content
Just like VStack, an HStack shrinks to fit its children rather than filling the whole width. It takes only the space it needs.
Combining HStack and VStack
Nest an HStack inside a VStack to build a card: a title row on top and a detail row below. Mixing both directions builds real layouts.
VStack {
Text("Title")
HStack {
Text("A")
Text("B")
}
}HStack Is a View
An HStack is a view too, so modifiers like padding or background apply to the entire row at once, treating it as a single block.
Mixed Content Rows
An HStack happily holds different view types together, like a number, a label, and a button all sharing one horizontal line.
HStack {
Text("42")
Button("Add") { }
}When to Reach for HStack
Use an HStack whenever items read left to right: a label and value, a toolbar of buttons, or an avatar beside a name.
Quick Check
Let's confirm how HStack lays things out.
Recap: Horizontal Rows
Great progress! An HStack lines views up left to right, centers them vertically, and pairs beautifully with VStack to build cards and rows. 🙌
Preguntas frecuentes
¿La lección «Filas con HStack» es gratis?
Sí — el texto completo de «Filas con HStack» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Filas con HStack»?
Coloque las vistas una junto a otra horizontalmente. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar SwiftUI Academy?
No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Filas con HStack»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?
Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.