0Pricing
Swift Academy · Урок

Основы VStack, HStack и ZStack

Размещайте представления вертикально, горизонтально и по глубине, задавая интервалы и выравнивание.

«Основы VStack, HStack и ZStack» — бесплатный урок Swift Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Swift Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Swift Academy содержит 4 уроков всего.

Добро пожаловать

`VStack`, `HStack` и `ZStack` — три основных контейнера компоновки в SwiftUI. Понимание их работы необходимо для создания любого интерфейса.

VStack — вертикальная компоновка

```swift VStack(alignment: .leading, spacing: 8) { Text("Title").font(.title) Text("Subtitle").foregroundColor(.secondary) Button("Action") {} } ```

HStack — горизонтальная компоновка

```swift HStack(spacing: 16) { Image(systemName: "star") Text("Favourite") Spacer() Text("4.9") } ```

ZStack — глубина

```swift ZStack(alignment: .bottomTrailing) { Image("background") Text("Overlay") .padding() .background(Color.black.opacity(0.5)) } ```

Варианты выравнивания

Выравнивание VStack: `.leading`, `.center`, `.trailing` Выравнивание HStack: `.top`, `.center`, `.bottom`, `.firstTextBaseline` Выравнивание ZStack: любое значение `Alignment`, объединяющее горизонтальное и вертикальное выравнивание

Параметр расстояния

```swift VStack(spacing: 0) { // no space between views Divider() Text("A") Divider() Text("B") } ```

Вложенные стеки

```swift VStack { HStack { Image("icon"); Text("Name") } Text("Description") } ``` Стеки можно вкладывать друг в друга на любую глубину, чтобы получить любую компоновку.

Spacer

```swift HStack { Text("Left") Spacer() // pushes views to edges Text("Right") } ```

Divider

```swift VStack { Text("Above") Divider() // horizontal line Text("Below") } ```

Производительность: Group и Stack

Если дочерних элементов больше 10, оберните их в `Group` или переключитесь на `LazyVStack`, чтобы избежать ограничений дерева представлений: ```swift ScrollView { LazyVStack { ForEach(items) { Text($0.name) } } } ```

Быстрая проверка

Какой стек размещает представления вдоль оси глубины — от переднего плана к заднему?

Итоги

Главное: • `VStack` — вертикальная компоновка; `HStack` — горизонтальная; `ZStack` — компоновка по глубине • Используйте параметры `alignment:` и `spacing:` • `Spacer()` раздвигает соседние элементы к краям • Вкладывайте стеки друг в друга для сложных компоновок • Используйте `LazyVStack`/`LazyHStack` для больших списков Далее: LazyVGrid и LazyHGrid.

Часто задаваемые вопросы

Урок «Основы VStack, HStack и ZStack» бесплатный?

Да — полный текст урока «Основы VStack, HStack и ZStack» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Swift Academy, подпишись на CoddyKit PRO. Курс Swift Academy содержит 4 уроков всего.

Чему я научусь в уроке «Основы VStack, HStack и ZStack»?

Размещайте представления вертикально, горизонтально и по глубине, задавая интервалы и выравнивание. Ты практикуешь Swift Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Swift Academy?

Предыдущий опыт не требуется. Swift Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Основы VStack, HStack и ZStack»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Swift Academy?

Да. Каждый урок Swift Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Основы VStack, HStack и ZStack
  2. LazyVGrid и LazyHGrid
  3. Модификаторы Spacer, Padding и Frame
  4. GeometryReader для адаптивных макетов
← Назад к Swift Academy