Выравнивание текста в SwiftUI: полный гайд с примерами

Выравнивание текста в SwiftUI: от новичка до профи

Вы когда-нибудь залипали на экран, пытаясь понять, почему ваш многострочный текст в SwiftUI упрямо прижимается к левому краю, хотя вы явно указали .center? Знакомая боль. Вопрос "SwiftUI text-alignment" собирает тысячи просмотров на Stack Overflow не просто так — это одна из тех мелочей, которая способна испортить весь интерфейс.

В этой статье мы разберем все способы управления выравниванием текста в SwiftUI. Я покажу вам не только базовые приемы, но и лайфхаки, которые сэкономят часы гугления. Поехали!

1. База: .multilineTextAlignment

Самый первый модификатор, с которым вы столкнетесь — это multilineTextAlignment. Он работает именно с многострочным текстом, но на самом деле влияет и на однострочный. Давайте посмотрим на примере:

import SwiftUI

struct AlignmentExample: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Этот текст выровнен по левому краю. По умолчанию в SwiftUI текст прижимается к левой стороне.")
                .multilineTextAlignment(.leading)
                .frame(maxWidth: 250)
                .border(Color.gray)
            
            Text("Этот текст — по центру. Идеально для заголовков и цитат.")
                .multilineTextAlignment(.center)
                .frame(maxWidth: 250)
                .border(Color.gray)
            
            Text("Этот текст — по правому краю. Часто используется в интернационализации для языков с письмом справа налево.")
                .multilineTextAlignment(.trailing)
                .frame(maxWidth: 250)
                .border(Color.gray)
        }
        .padding()
    }
}

Важно: multilineTextAlignment работает только внутри контейнера, который ограничивает ширину текста. Если вы не зададите frame, текст займет всю доступную ширину, и выравнивание может не сработать так, как вы ожидаете.

2. Разница между .leading и .left

В SwiftUI есть .leading, .trailing, .left и .right. В чем разница?

• .leading / .trailing — адаптивные значения. В языках с письмом слева направо (английский, русский) .leading = .left, .trailing = .right. В арабском или иврите — наоборот.
• .left / .right — жесткая привязка к стороне. Не меняются в зависимости от локали.

Apple рекомендует использовать .leading и .trailing для поддержки интернационализации. Но если вам нужно именно "всегда слева" — используйте .left.

3. Выравнивание текста внутри контейнеров

Часто проблема не в самом Text, а в том, как он расположен внутри VStack, HStack или ZStack. Вот тут в игру вступает параметр alignment у стеков.

3.1. VStack и HStack

struct StackAlignmentExample: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Заголовок")
                .font(.title)
            Text("Это описание, которое должно начинаться с той же левой границы, что и заголовок. Без явного выравнивания стека текст может съехать.")
                .font(.body)
        }
        .frame(maxWidth: 300)
        .padding()
        .background(Color.yellow.opacity(0.3))
        .cornerRadius(10)
    }
}

Лайфхак: Если вы хотите, чтобы весь текст внутри VStack был выровнен по центру, но при этом каждый элемент мог иметь свое выравнивание — комбинируйте alignment стека и multilineTextAlignment у конкретных Text.

3.2. ZStack и overlay

Иногда нужно разместить текст поверх другого view. Тут выручает ZStack или модификатор .overlay:

struct OverlayAlignmentExample: View {
    var body: some View {
        ZStack {
            Color.blue
                .frame(width: 200, height: 200)
                .cornerRadius(20)
            
            Text("SwiftUI")
                .font(.largeTitle)
                .foregroundColor(.white)
                .multilineTextAlignment(.center)
        }
    }
}

По умолчанию ZStack центрирует все элементы. Чтобы изменить это, используйте alignment:

ZStack(alignment: .topLeading) {
    // контент
}

4. Продвинутые техники: кастомное выравнивание

Стандартных модификаторов часто хватает, но в сложных макетах может потребоваться точный контроль. Вот два мощных инструмента.

4.1. Alignment Guides

Позволяют задать кастомную точку выравнивания для каждого view внутри стека:

struct CustomAlignmentGuide: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Имя:")
                .alignmentGuide(.leading) { d in
                    d[.leading] + 20
                }
            Text("SwiftUI разработчик")
                .alignmentGuide(.leading) { d in
                    d[.leading] + 20
                }
        }
    }
}

Этот пример сдвигает оба текста на 20 пикселей от левого края стека. Полезно для создания форм и списков с отступами.

4.2. GeometryReader для точного позиционирования

Если нужно выровнять текст относительно границ экрана или другого view — GeometryReader ваш друг:

struct GeometryReaderAlignment: View {
    var body: some View {
        GeometryReader { geo in
            Text("Центр экрана")
                .position(x: geo.size.width / 2, y: geo.size.height / 2)
        }
    }
}

Внимание: GeometryReader занимает все доступное пространство, поэтому используйте его осознанно. Он может "сломать" размеры родительского контейнера.

5. Частые ошибки и их решения

Собрал топ-3 проблемы, с которыми сталкиваются новички (и не только).

• Ошибка 1: Текст не выравнивается, хотя я применил .center.
  Решение: Проверьте, что вы задали frame(maxWidth: ...). Без ограничения ширины текст займет всю строку, и выравнивание не будет заметно.
• Ошибка 2: Выравнивание работает, но "прыгает" при повороте экрана.
  Решение: Используйте относительные размеры (maxWidth: .infinity) или GeometryReader для адаптивности.