Alineación de texto SwiftUI

Entre las muchas propiedades de la Textvista, no pude encontrar ninguna relacionada con la alineación del texto. He visto en una demostración que maneja automáticamente RTL, y cuando coloca cosas usando View body, siempre lo centra automáticamente.

¿Hay algún concepto que me falta sobre el sistema de diseño SwiftUI? Si no, ¿cómo puedo configurar las propiedades de alineación del texto Text?

Jan 01 '70 08:01 inokey

Desde SwiftUI beta 3 en adelante, puede centrar una vista de texto con el modificador de marco:

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

Jul 08 '2019 16:07 Jim Marquardt

Estaba tratando de entender esto yo mismo, ya que otras respuestas aquí mencionan // Text.multilineTextAlignment(_:)pero cada solución resuelve un problema específico. En última instancia, depende de los requisitos de la interfaz de usuario y de una combinación de ellos.VStack(alignment:)frame(width:alignment:)

VStack(alignment:)

Aquí alignmentes para las vistas internas una respecto de la otra.
Por lo tanto, especificar .leadingasociaría todas las vistas internas para que sus líderes estuvieran alineados entre sí.

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

En frame(width:alignment:)o frame(maxWidth:alignment:), alignmentes para el contenido dentro del ancho dado.

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))

Las vistas internas están alineadas al principio entre sí, pero las vistas mismas están alineadas al final respectivamente VStack.

.multilineTextAlignment

Esto especifica la alineación del texto en el interior y se puede ver mejor cuando hay varias líneas; de lo contrario, sin un definido frame(width:alignment), el ancho se ajusta automáticamente y se ve afectado por los alignmentvalores predeterminados.

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))

Pruebas con combinaciones:

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))

Apr 10 '2020 11:04 staticVoidMan