0Pricing
SwiftUI Academy · Урок

Пользовательские направляющие выравнивания

Точно выравнивайте представления во всей иерархии.

«Пользовательские направляющие выравнивания» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Lining Things Up

Stacks align children using a shared edge or center. Alignment guides let you fine-tune exactly where that line falls. 📏

Built-in Alignments

An HStack takes a vertical alignment like .top or .center, while a VStack takes a horizontal one.

HStack(alignment: .top) {
    Text("A")
    Text("Big")
}

The alignmentGuide Modifier

The alignmentGuide modifier overrides where a single view exposes a given alignment to its parent.

Text("Hi")
    .alignmentGuide(.top) { d in d[.bottom] }

Reading Dimensions

The closure gets a ViewDimensions value, letting you read d.width, d.height, or any named guide.

Text("Hi").alignmentGuide(.leading) { d in
    d.width / 2
}

Shift the Guide

Returning a different number moves the view relative to its peers, since the parent lines up everyone on that returned value.

Custom Alignment ID

For reuse, define a type conforming to AlignmentID with a defaultValue for unaligned cases.

struct MidBadge: AlignmentID {
    static func defaultValue(in d: ViewDimensions) -> CGFloat {
        d[.bottom]
    }
}

Name It on Alignment

Extend VerticalAlignment or HorizontalAlignment with a static property bound to your AlignmentID.

extension VerticalAlignment {
    static let midBadge = VerticalAlignment(MidBadge.self)
}

Use the Custom Line

Pass your named alignment to a stack, then tag the views that should snap to that custom line.

HStack(alignment: .midBadge) {
    Avatar()
    Label()
}

Tag the Participants

Each view that should share the line sets alignmentGuide for your custom alignment to the point it wants to match.

Label()
    .alignmentGuide(.midBadge) { d in
        d[VerticalAlignment.center]
    }

Cross-Hierarchy Power

Custom guides shine when views live in different containers but must still align, like a caption to an icon center across columns. ✨

Mind the Default

Any view that does not set your custom guide falls back to its defaultValue, so pick that default thoughtfully.

Quick Check

Recall what the alignmentGuide closure receives.

Recap

You can now override alignment with alignmentGuide and define custom AlignmentID types to align views across the hierarchy. 🎉

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

Урок «Пользовательские направляющие выравнивания» бесплатный?

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

Чему я научусь в уроке «Пользовательские направляющие выравнивания»?

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

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

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

Сколько времени занимает урок «Пользовательские направляющие выравнивания»?

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

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

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

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

  1. Основы GeometryReader
  2. Пользовательские направляющие выравнивания
  3. Протокол Layout
  4. Создание Flow Layout
← Назад к SwiftUI Academy