Mostrar Texto simple con SwiftUI

En SwiftUI para mostrar texto en pantalla se usa el componente Text. Es una vista que le permite mostrar una o varias líneas de texto. Este control de texto no se puede editar, pero es útil para presentar información de solo lectura en la pantalla. Por ejemplo, si desea presentar un mensaje en pantalla, puede usar Texto para implementarlo.

Visualización de un texto simple

El siguiente código de muestra es para mostrar en el ContentView una sola línea de texto. Inicializa un texto y lo pasa con el texto (por ejemplo, Hola mundo SwiftUI) para que se muestre así:

Text("Hello Word SwiftUI")

import SwiftUI


struct ContentView: View {

    
    var body: some View {
               
        Text("Hello Word SwiftUI").fontWeight(.bold)
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Modificadores

El componente Text en SwiftUI permite una serie de modificadores para alterar la visualización del texto, por ejemplo poner el texto en negrita, aumentar su tamaño, su color de fondo, color de letra, cambiar fuente etc…

Cambio del estilo de la fuente

Para cambiar el tipo del texto se usa el modificador fontWeight y especificar su valor especifico

El modificador más popular es bold que sirve para poner el texto en negrita.

Text("Hello Word SwiftUI").fontWeight(.bold)

Existen otros valores para asignar en fontWeight, de mayor enfasí a menor, black, heavy, bold, semiBold, medium, regular, light, thin, ultraThin

Text("black").fontWeight(.black)
Text("heavy").fontWeight(.heavy)
Text("bold").fontWeight(.bold)
Text("semi bold").fontWeight(.semibold)
Text("medium").fontWeight(.medium)
Text("regular").fontWeight(.regular)
Text("light").fontWeight(.light)
Text("thin").fontWeight(.thin)
Text("ultra thin").fontWeight(.ultraLight)

Text fontWight SwiftUI

Cambio del tamaño de la fuente

Para modificar el tamaño del texto se usa el modificador font permite asignar valores de tamaño

Text("Hola Mundo SwiftUI").font(.system(size: 30))

SwiftUI nos permite una serie de valores preestablecidos, son los siguientes: largeTitle para especificar un titulo grande, title para especificar un titulo, body para el cuerpo del mensaje, caption para texto más pequeño.

Text("Large Title").font(.largeTitle)
Text("Title").font(.title)
Text("Title2").font(.title2)
Text("Title3").font(.title3)
Text("HeadLine").font(.headline)
Text("Subheadline").font(.subheadline)
Text("Body").font(.body)
Text("Caption").font(.caption)
Text("Caption2").font(.caption2)

font

Algunas fuentes permite extras como diseño redondeado

.font(.system(.largeTitle, design: .rounded))

Cambiar el estilo del texto

Con los métodos siguientes podemos cambiar el estilo del la fuente, para mostrar texto subrayado, cursiva, tachado

• uderline: para subrayar el texto
• italic: para mostrar el texto con cursiva
• strikethrough: para mostra el texto tachado
• bold: para mostrar el texto en negrita

Text("bold").bold()
Text("italic").italic()
Text("underline").underline()
Text("StrikeThrough").strikethrough()

text style con métodos

Cambio del color de la fuente

Con el modificador foregroundColor podemos cambiar el color del texto

Text("Hola Mundo SwiftUI").foregroundColor(.green)

A parte de los colores de paleta popular green, red, blue, yellow podemos usar los colores asignados por el sistema

Text("primary color text").foregroundColor(.primary)
Text("Secondary color text").foregroundColor(.secondary)
Text("Accent color text").foregroundColor(.accentColor)

foregroundColor

Personalización combinando modificadores

Podemos personalizar por completo el componente Texto para adaptar a nuestras necesidades, por ejemplo usar otro tipo de fuente, aumentar su tamaño, poner en negrita y alterar su color especificando con RGB

Text("Texto personalizado Text SwiftUI")
    .font(.custom("Helvetica Neue", size: 20, relativeTo: .body))
    .fontWeight(.heavy)
    .italic()
    .strikethrough()
    .foregroundColor(Color(red: 0 / 255, green: 0 / 255, blue: 255 / 255).opacity(0.3))

Anuncio publicitario