Aprende a Programar Apps para iPhone con  Swift, SwiftUI y UIKit - lafactoriaapple

Cómo cambiar el Estilo de los Textos con SwiftUI

Ya hemos visto lo fácil que es crear un Texto con SwiftUI, ahora veamos como cambiar su apariencia.

Tomemos como punto de partida el Código Fuente que se genera automáticamente cuando creamos un Proyecto SwiftUI.

Hacemos clic sobre el botón Resume para que se muestre la Vista Previa

Ya tenemos nuestra situación de partida

Cómo cambiar el Estilo de los Textos en Modo Gráfico

Xcode ha demostrado ser un moderno y potente IDE, y eso se refleja a la hora de poder editar aspectos de nuestra App en módo gráfico, sin tener que trabajar con el Código Fuente.

En el caso que nos ocupa, nos fijaremos en el Texto que se muestra en la Preview. Mantendremos pulsada la tecla Cmd y haremos clic sobre el texto, apareciéndonos el siguiente menú

Elegimos la opción Show SwiftUI Inspector...

En la sección Modificadores podremos cambiar algunos de los aspectos básicos que definen el Estilo de nuestro Texto, como Font, Weight, Color,

Obteniendo como resultado:

Otra forma de hacerlo es seleccionando (haciendo un clic) el elemento de texto (en el Editor de Código o en la Preview) y abriendo el Attributes Inspector en el panel de la Derecha.

Xcode se encarga de escribir el Código Fuente correspondiente a los Estilos aplicados al texto.

Comprobamos que la Sintaxis del Código SwiftUI es la propia de un Lenguaje de Programación Declarativo.

Cómo cambiar el Estilo de los Textos desde el Código Fuente

Mediante los Modificadores de un elemento podremos cambiar las propiedades del mismo. Gracias a que Xcode tiene la capacidad de Autocompletado de Código, esta tarea será muy sencilla de llevar a cabo.

Bastará con escribir . a continuación de nuestro Text y se desplegará el listado de Modificadores disponibles.

Cómo cambiar el Grosor del Texto

Para cambiar el grosor del texto tenemos que emplear el método fontWeight.

Conforme empezamos a escribir, Xcode nos autocompleta ofreciéndonos distintas opciones. En este caso la que nos interesa es

.fontWeight(_ weight: Font.Weight?) -> Text

Donde weight: Font.Weight? es un Enumerado, por lo que hacemos clic sobre ese Código y escribiremos . y Xcode volverá a desplegarnos un menú con los distintos valores disponibles

Text("Hello World!").fontWeight(.bold)

Para que el código sea más legible, colocaremos los Modificadores en distintas líneas

Text("Hello World!")
    .fontWeight(.bold)

Cómo cambiar el Color del Texto

Para cambiar el color del texto tenemos que emplear el método foregroundColor.

Como vemos, podemos encadenar tantos Modificadores como deseemos para obtener el Estilo del Texto que estamos buscando.

Más en esta Sección