Среди множества свойств Text
представления я не нашел ничего, связанного с выравниванием текста. Я видел в демонстрации, что он автоматически обрабатывает RTL, а при размещении материала с использованием View body
всегда центрирует его автоматически.
Есть ли какая-то концепция, которую мне не хватает в системе макета, SwiftUI
и если нет, как я могу установить свойства выравнивания текста на Text
?
Начиная с версии SwiftUI beta 3, вы можете центрировать текстовое представление с помощью модификатора кадра:
Text("Centered") .frame(maxWidth: .infinity, alignment: .center)
источник
Пытался понять это сам, поскольку здесь упоминаются другие ответы
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)
ширина автоматически регулируется и зависит от значения по умолчаниюalignment
s.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))
источник
Я действительно столкнулся с проблемой, когда мне пришлось выровнять текст в одной строке. Я обнаружил, что работает следующее:
Text("some text") .frame(alignment: .leading)
Если вы объедините это с параметром ширины рамки, вы можете получить хорошее форматирование текстового блока для меток и тому подобного.
источник
Я думаю, что
SwiftUI
хочет, чтобы мы использовали обертки как стеки для таких вещей.Поэтому вместо того, чтобы писать что-то вроде
Text("Hello World").aligned(.leading)
, рекомендуется следующее:VStack(alignment: .leading) { Text("Hello World") }
источник
Если вы хотите сохранить постоянную ширину для текста, ".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)
источник
Нам нужно выровнять текст, а не стек, в котором он находится. Таким образом, вызывая
multilineTextAlignment(.center)
и устанавливая пределы строк, я могу видеть тексты, выровненные по центру. Я не знаю, зачем мне устанавливать границы строк, я думал, что это расширится, если у вас будет большой текст.Text("blahblah") .font(.headline) .multilineTextAlignment(.center) .lineLimit(50)
источник
Вы можете установить выравнивание для Vertical stackView как ведущее. Как показано ниже
VStack(alignment: .leading) { Text("Turtle Rock") .font(.title) Text("Joshua Tree National Park") .font(.subheadline) }
источник
Я хочу использовать режим Spacer () для выравнивания текстового блока. В этом примере показан текст на задней стороне:
HStack{ Spacer() Text("Wishlist") }
источник