Welcome to a fun and easy introduction to app development with SwiftUI! This tutorial will…
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.
Leave a comment to Submit the NEW and USEFUL code related to the topic of this post.
Submit a brief and useful code only.