Skip to content
Join us for Free for Full Access to site Content

SwiftUI Text

SwiftUI Text is used to display one or more lines of read-only text.

How to display Text in SwiftUI

To display Text use Text view.

var body: some View {
       <span class="code-line-container" data-v-6334be62=""><span class="code-line" data-v-6334be62=""> <span class="syntax-type">Text</span>(<span class="syntax-string">"Hello AppMakers.dev visitors, happy SwiftUI Learning"</span>)</span></span>            
    } 

How to concatenate SwiftUI Text

Just use plus “+” to concatenate Text views.

var body: some View {
       <span class="code-line-container" data-v-6334be62=""><span class="code-line" data-v-6334be62=""> <span class="syntax-type">Text</span>(<span class="syntax-string">"Hello"</span>) + Text("<span class="syntax-string">AppMakers.dev visitors</span>")</span></span>            
    } 

How to add style to Text

Use various text modifiers to change the style of your Text.

This content is for members only. Login or Register to read

How to center text or add Alignment to Text in Swift UI

To center text use .multilineTextAlignment(.center) modifier. Or you can use .trailing or .leading if you need instead.

var body: some View {
       <span class="code-line-container" data-v-6334be62=""><span class="code-line" data-v-6334be62=""> Text("Hello").multilineTextAlignment(.center)</span>           
    } </span>

How to add kerning to SwiftUI Text

Just use .kerning modifier to change kerning of your Text view.

This content is for members only. Login or Register to read

How to add tracking to Text

To add space between characters you can use tracking. It is similar to kerning(_:), but it treats tracking as trailing whitespace and a nonzero amount disables nonessential ligatures. The code above adds 0.2 point of spacing between each character of the text.

var body: some View {
       <span class="code-line-container" data-v-6334be62=""><span class="code-line" data-v-6334be62=""> Text("Hello").tracking(0.2)</span>           
    } </span>

How to add Int value to Text in SwiftUI

var body: some View {
       <span class="code-line-container" data-v-6334be62=""><span class="code-line" data-v-6334be62=""> Text("Items: \(112)")</span>           
    } </span>

Learn more about SwiftUI using SwiftUI Tutorials by the AppMakers

If anything will change in the future, it is OK, you can always check the official documentation.

Text Documentation

Leave a comment to Submit the NEW and USEFUL code related to the topic of this post.
Submit a brief and useful code only.

Back To Top
Search

Get Latest App Development News, Tips and Tutorials

* indicates required


Send this to a friend