Строки с HStack
Размещайте представления рядом друг с другом по горизонтали.
«Строки с HStack» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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. 🙌
Часто задаваемые вопросы
Урок «Строки с HStack» бесплатный?
Да — полный текст урока «Строки с HStack» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.
Чему я научусь в уроке «Строки с HStack»?
Размещайте представления рядом друг с другом по горизонтали. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать SwiftUI Academy?
Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Строки с HStack»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке SwiftUI Academy?
Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.