Multiple lineas en Text con SwiftUI


El componente Text para SwiftUI permite mostrar contenido que ocupe varias líneas, permite saltos de línea pero mejor usar los carácteres de escape \n para más comodidad.

Definir texto multi-línea

Para establecer contenido con multiple línea, el texto se debe encapsular con «»» importante que este en lineas separadas

let src = """
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.\n\nMany desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
"""
Text(src)
    .padding()

Limitar líneas a mostrar

Con el modificador lineLimit podremos limitar el número de líneas que se quieren mostrar, el siguiente ejemplo lo limita en 3 líneas

Text(src)
    .padding()
    .lineLimit(3)

Aplicar puntos suspensivos

Por defecto al cortar el contenido multi-línea lo hace mediante 3 puntos suspensivos al final del componente, pero con el modificador trucationMode se puede cambiar el mode de corte

  • head: corta el texto partiendo del primer salto de línea hacia atrás.
  • middle: corta el texto partiendo del primer salto de línea hacia adelante.
  • tail: corta el texto hasta la línea de corte (por defecto)
Text(src)
    .padding()
    .lineLimit(5)
    .truncationMode(.head)
Text(src)
    .padding()
    .lineLimit(5)
    .truncationMode(.middle)

Ajustar la alineación del texto

El contenido de texto en SwiftUI, se alinea de forma predeterminada al inicio de la vista. Con el modificador multilineTextAlignment se puede cambiar su alineación

  • leading: alinear a la izquierda
  • center: alinear al centro
  • trailing: alinear a la derecha
Text(src)
    .padding()
    .multilineTextAlignment(.center)

Publicado por Webserveis

Desarrollador freelance programador apasionado por el arte de programar, amante del auto aprendizaje y interesado por la tecnología en general.

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: