Mastering Text Label Styling in SwiftUI: Level up Your UI Design!

In SwiftUI, text labels can be styled using various modifiers and properties. These modifiers allow you to customize the font, color, alignment, and other aspects of the text. Let’s dive into some examples.

Changing the Font and Size: To change the font and size of a text label, you can use the font modifier. For example, to set the font to “Arial” with a size of 20, you can use the following code:

Text("Hello, World!")
.font(.system(size: 20))

Applying Text Color: To change the color of the text, use the foregroundColor modifier. You can specify a specific color or use predefined colors from the SwiftUI Color struct. Here’s an example:


Adding Background Color: To add a background color to the text, you can use the background modifier. This modifier takes a SwiftUI View as a parameter, so you can use any view or shape to define the background. Here’s an example:


Aligning Text: To align the text within its container, use the multilineTextAlignment modifier. This modifier offers alignment options such as .leading, .center, and .trailing. Here’s an example:

Text("Centered Text")

Applying Text Styling: SwiftUI provides additional styling options for text like bold, italic, underline, and strikethrough. You can use the bold(), italic(), underline(), and strikethrough() modifiers respectively. Here’s an example:


Combining Modifiers: You can combine multiple modifiers to achieve the desired style. For example, to create a text label with a red background, white text color, and bold font, you can use the following code:

.font(.system(size: 18))

That’s it! These are some of the basic text styling options available in SwiftUI. You can experiment with different combinations to create unique styles for your text labels. Remember to check the SwiftUI documentation for more advanced styling options.

I hope this tutorial helps you style text labels in SwiftUI. Let me know if you have any further questions!

Leave a Reply