Выравнивание текста SwiftUI

Я предполагаю, что SwiftUI хочет, чтобы мы использовали обертки, такие как стеки, для таких вещей.

Поэтому вместо того, чтобы писать что-то вроде Text("Hello World").aligned(.leading), рекомендуется следующее:

VStack(alignment: .leading) {
    Text("Hello World")
}

Вы можете установить выравнивание для вертикального stackView как ведущее. Как ниже

 VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
                .font(.subheadline)
        }

Сделать это можно с помощью модификатора .multilineTextAlignment(.center).

Документация Apple

Начиная с бета-версии SwiftUI 3, вы можете центрировать текстовое представление с помощью модификатора frame:

Text("Centered")
    .frame(maxWidth: .infinity, alignment: .center)

Нам нужно выровнять текст, а не стек, в котором он находится. Поэтому, вызвав multilineTextAlignment(.center) и установив ограничения строки, я смогу увидеть тексты, выровненные по центру. Я не знаю, почему я должен установить пределы строки, я думал, что это увеличится, если у вас большой текст.

Text("blahblah")
        .font(.headline)
        .multilineTextAlignment(.center)
        .lineLimit(50)

На самом деле я столкнулся с проблемой, когда мне пришлось выровнять текст по одной строке. Что я нашел для работы, так это:

Text("some text")
    .frame(alignment: .leading)

Если вы объедините это с параметром ширины рамки, вы можете получить красивое форматирование текстового блока для меток и тому подобного.

Если вы хотите сохранить постоянную ширину для текста, «.multilineTextAlignment(.leading)» не будет иметь никакого эффекта, пока не будет только одна строка текста.

Это решение, которое сработало для меня:

struct LeftAligned: ViewModifier {
    func body(content: Content) -> some View {
        HStack {
            content
            Spacer()
        }
    }
}


extension View {
    func leftAligned() -> some View {
        return self.modifier(LeftAligned())
    }
}

Применение:

Text("Hello").leftAligned().frame(width: 300)

Сам пытался понять это, поскольку в других ответах здесь упоминаются Text.multilineTextAlignment(_:) / VStack(alignment:) / frame(width:alignment:), но каждое решение решает конкретную проблему. В конце концов, это зависит от требований пользовательского интерфейса и их комбинации.

VStack(alignment:)

alignment здесь для внутренних взглядов по отношению друг к другу.
Таким образом, указание .leading свяжет все внутренние представления, чтобы их интерлиньяж был выровнен друг с другом.

VStack(alignment: .leading, spacing: 6) {
  Text("Lorem ipsum dolor")
        .background(Color.gray.opacity(0.2))
  Text("sit amet")
        .background(Color.gray.opacity(0.2))
}
.background(Color.gray.opacity(0.1))

.frame

В frame(width:alignment:) или frame(maxWidth:alignment:)alignment предназначен для содержимого в пределах заданной ширины.

VStack(alignment: .leading, spacing: 6) {
  Text("Lorem ipsum dolor")
      .background(Color.gray.opacity(0.2))
  Text("sit amet")
      .background(Color.gray.opacity(0.2))
}
.frame(width: 380, alignment: .trailing)
.background(Color.gray.opacity(0.1))

Внутренние представления выровнены по началу относительно друг друга, но сами представления выровнены по хвосту относительно VStack.

.multilineTextAlignment

Это определяет выравнивание текста внутри и лучше всего видно, когда есть несколько строк, в противном случае без определенного frame(width:alignment) ширина настраивается автоматически и зависит от alignments по умолчанию.

VStack(alignment: .trailing, spacing: 6) {
  Text("0. automatic frame\n+ view at parent's specified alignment\n+ multilineTA not set by default at leading")
    .background(Color.gray.opacity(0.2))
  Text("1. automatic frame\n+ view at parent's specified alignment\n+ multilineTA set to center")
  .multilineTextAlignment(.center)
  .background(Color.gray.opacity(0.2))
  Text("2. automatic frame\n+ view at parent's specified alignment\n+ multilineTA set to trailing")
  .multilineTextAlignment(.trailing)
  .background(Color.gray.opacity(0.2))
}
.frame(width: 380, alignment: .trailing)
.background(Color.gray.opacity(0.1))

Тесты с комбинациями:

VStack(alignment: .trailing, spacing: 6) {
  Text("1. automatic frame, at parent's alignment")
  .background(Color.gray.opacity(0.2))
  Text("2. given full width & leading alignment\n+ multilineTA at default leading")
  .frame(maxWidth: .infinity, alignment: .leading)
  .background(Color.gray.opacity(0.2))
  Text("3. given full width & center alignment\n+ multilineTA at default leading")
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("4. given full width & center alignment\n+ multilineTA set to center")
  .multilineTextAlignment(.center)
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("5. given full width & center alignment\n+ multilineTA set to trailing")
  .multilineTextAlignment(.trailing)
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("6. given full width but no alignment\n+ multilineTA at default leading\n+ leading is based on content, looks odd sometimes as seen here")
  .frame(maxWidth: .infinity)
  .background(Color.gray.opacity(0.2))
}
.frame(width: 380)
.background(Color.gray.opacity(0.1))

Я бы хотел использовать вид Spacer() для выравнивания текстового блока. В этом примере показан текст на задней стороне:

HStack{
    Spacer()
    Text("Wishlist")
}

Не уверен, что это тот ответ, который вы ищете, но я обнаружил, что SwiftUI автоматически переключается на RTL для таких языков, как арабский, вам не нужно явно указывать это, как в UIKit.

У меня такая же проблема. я использовал это для исправления этого.

Text("Test")
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)

Вы всегда можете добавить рамку в текстовое поле и изменить его выравнивание.

Text("Hello World!")
   .frame(alignment : .topLeading)

Так как это только для пары строк - это лучше, чем использовать выравнивание на любом из стеков.