Как выровнять текст по левому, правому краю или центру в SwiftUI?

Понимание выравнивания в SwiftUI: разница между контейнером и содержимым

Проблема, с которой вы столкнулись, — одна из самых частых у новичков в SwiftUI. Дело в том, что в SwiftUI есть два разных понятия выравнивания:

• Выравнивание внутри контейнера (например, внутри VStack или HStack) — это то, как дочерние элементы располагаются относительно друг друга.
• Выравнивание самого текста (как строки текста выравниваются внутри своего блока) — это то, что делает multilineTextAlignment.

В вашем примере текст по умолчанию выравнивается по левому краю, но VStack по умолчанию центрирует все свои дочерние элементы по горизонтали. Именно поэтому кажется, что текст "по центру" — на самом деле центрируется весь блок текста, а не его строки.

Решение: комбинируем frame и alignment

Самый правильный способ — использовать модификатор .frame() с параметром alignment. Это заставит контейнер текста растянуться на всю ширину и прижать содержимое к нужному краю. Вот исправленный код:

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) { // Выравнивание дочерних элементов в VStack
            Text("Это заголовок")
                .font(.largeTitle)
                .fontWeight(.bold)
            
            Text("А это длинный текст, который теперь выровнен по левому краю. Обратите внимание, что я добавил .frame(maxWidth: .infinity, alignment: .leading) и указал alignment в VStack.")
                .font(.body)
                .frame(maxWidth: .infinity, alignment: .leading) // Растягиваем на всю ширину
        }
        .padding()
    }
}

Почему это работает?

• VStack(alignment: .leading) — говорит, что все дочерние элементы должны быть выровнены по левому краю относительно друг друга.
• .frame(maxWidth: .infinity, alignment: .leading) — растягивает сам элемент Text на максимально возможную ширину (в данном случае на всю ширину экрана минус отступы) и прижимает его содержимое к левому краю.

Дополнительные советы

• Для многострочного текста: если текст занимает несколько строк и вы хотите выровнять сами строки (например, по правому краю), используйте .multilineTextAlignment(.trailing). Это работает внутри уже растянутого frame.
• Для правого выравнивания: замените .leading на .trailing в обоих местах.
• Для выравнивания по центру: можно опустить alignment в VStack (по умолчанию .center) и использовать .frame(maxWidth: .infinity, alignment: .center).

Пример с разными вариантами

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            // По левому краю
            Text("Выравнивание по левому краю")
                .frame(maxWidth: .infinity, alignment: .leading)
                .background(Color.gray.opacity(0.2))
            
            // По центру
            Text("Выравнивание по центру")
                .frame(maxWidth: .infinity, alignment: .center)
                .background(Color.gray.opacity(0.2))
            
            // По правому краю
            Text("Выравнивание по правому краю")
                .frame(maxWidth: .infinity, alignment: .trailing)
                .background(Color.gray.opacity(0.2))
        }
        .padding()
    }
}

Обратите внимание: я добавил .background() только для наглядности, чтобы было видно, как именно растягивается блок. В реальном коде это не нужно.

Заключение

Главный принцип: в SwiftUI выравнивание текста — это комбинация выравнивания контейнера (VStack/HStack) и выравнивания самого элемента через .frame() и .multilineTextAlignment(). Не забывайте, что .frame(maxWidth: .infinity) — ваш лучший друг для управления расположением элементов на экране.

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .topLeading) {
                Color.clear // Фоновый слой для занимания места
                
                Text("Текст, прижатый к левому верхнему углу")
                    .font(.body)
                    .alignmentGuide(.leading) { d in
                        d[.leading]
                    }
                    .alignmentGuide(.top) { d in
                        d[.top]
                    }
            }
            .frame(width: geometry.size.width, height: 200)
            .background(Color.gray.opacity(0.1))
        }
        .padding()
    }
}