TEXT en SWIFTUI en Español
Text en SwiftUI

TEXT en SWIFTUI en Español

Text en SwiftUI 2.0 es muy útil para mostrar texto en nuestras apps iOS. Text tiene modificadores que nos permiten personalizar el texto (color, fuente, shadows, etc). También podemos concatenar varios Text con distintos estilos y mostrar fechas dentro de Text.

SwiftBeta
Aprende SwiftUI desde cero

Text es una vista en SwiftUI que nos permite mostrar un texto, pero es más potente de lo que pensamos.

Text en Código

Para usar Text en SwiftUI podemos hacer lo siguiente:

struct ContentView: View {
    var body: some View {
        Text("Suscribiros a SwiftBeta")
    }
}

En este caso, solo espera un único parámetro y será el texto que mostrará. Vamos a ver cómo podemos añadir modificadores a un Text.


Modificadores de Text en SwiftUI

Tenemos varios modificadores en Text

struct ContentView: View {
    var body: some View {
        Text("Suscribiros a SwiftBeta")
            .font(.largeTitle)
            .underline()
            .frame(width: 200)
            .lineLimit(2)
            .lineSpacing(10)
            .rotation3DEffect(.degrees(60), axis: (x: 1, y: 0, z: 0))
            .shadow(color: .gray, radius: 2, x: 0, y: 15)
    }
}
Código de un Text en SwiftUI

vamos a comentar los modificadores usados en el anterior código:

  • font, cambiar la fuente de nuestro Text.
  • frame, modificar el tamaño de nuestro Text.
  • lineLimit, el límite de líneas que queramos que tenga nuestro Text, en caso de que el texto ocupe más de las líneas especificadas se truncaría.
  • lineSpacing, espacio que queremos entre líneas.
  • underline, subrayar el texto.
  • rotation3DEffect, aplicar una rotación 3D.
  • shadow, aplicar un sombreado.

Con muy pocos modificadores podemos modificar el aspecto de nuestro Text.


Concatenar varios Text en SwiftUI

Un tema muy interesante es que podemos concatenar distintos Text con distintos modificadores y contenido. Es muy útil cuando queremos que un texto tenga distintos modificadores en distintas partes de la frase, un ejemplo:

struct ContentView: View {
    var body: some View {
        Text("Suscribiros a SwiftBeta")
              .font(.largeTitle)
              .underline()
              .foregroundColor(.red)
        + Text(" para aprender a programar")
              .font(.body)
              .foregroundColor(.blue)
        + Text(" SWIFTUI")
              .font(.body)
              .bold()
        + Text(" si te gusta el video puedes darle a LIKE")
              .font(.headline)
              .foregroundColor(.green)
    }
}
Código concatenando Text con distintos modificadores en SwiftUI

Mostrar fechas en Text en SwiftUI

Podemos mostrar fechas dentro de un text, solo debemos pasar la fecha y un style para indicar en qué formato la queremos mostrar, es decir, ahora con SwiftUI 2.0 y iOS 14 podemos hacer lo siguiente:

struct ContentView: View {
    var body: some View {
        VStack {
            Text(Date(), style: .date)
            Text(Date(), style: .time)
            Text(Date(), style: .relative)
            Text(Date(), style: .timer)
        }
    }
}
Código muy simple mostrando fechas en un Text en SwiftUI

Puedes incluso crear un timer solo con una línea de código:

Text(Date(), style: .timer)
Código de un timer solo usando Text en SwiftUI


Como ves Text es mucho más útil que solo mostrar un Text, nos da mucha flexibilidad ¡y eso que aún no hemos visto todo!

Hasta aquí el post de hoy, gracias por leernos! 🤓
👉👉 SUSCRÍBETE al CANAL de youtube
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple


SwiftUI desde cero