📦Text

⭐ 基本語法

// ⭐️ "string" 並非單純字串，它其實當作 "localization key"
Text("string")  

// ⭐️ 設定小數位數
Text("\(scale, specifier: "%.2f")" )

// ⭐️ 設定小數位數(Slider 常用)
//                           小數位數 ↴
Text("scale：\(scale, specifier: "%0.2f")")       // 兩位小數
    .font(.system(.body, design: .monospaced))    // ⭐️ 使用等寬字體

// ⭐️ 多行對齊
Text("first line\nsecond line\nthird line")
    .multilineTextAlignment(.center)    // ⭐️ 還有 .leading, .trailing

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            texts
            Color.secondary.frame(height: 0.5)
            textWithBG
        }
        .padding(40)
    }
}

extension ContentView {
    
    /// ⭐ text with background is NO MORE a `Text`❗❗❗
    var textWithBG: some View {
        HStack {
            Text("⚠️")
            Text(" .background ").background(Color.pink)
            Text(" is ")
                + Text("NO MORE").bold().foregroundColor(.pink)
                + Text(" a `Text`❗")
        }
    }
    
    /// texts in different styles
    var texts: some View {
        [
            Text(".bold").bold(),
            Text(".italic").italic(),
            Text(".foregroundColor").foregroundColor(.green),
            
            Text(".font(.title)").font(.title),
            Text("\n.fontWeight(.heavy)").fontWeight(.heavy),
            Text(".font(.system(size:40))").font(.system(size: 40)),
            
            Text("\n.strikethrough").strikethrough(),
            Text(".strikethrough(true, color: .red)").strikethrough(true, color: .red),
            Text("\n.underline").underline(),
            Text(".underline(true, color: .blue)").underline(true, color: .blue),
            
            Text(".baseline")
            + Text("Offset(10)").baselineOffset(10).font(.caption),
            
            Text("\n.kerning .kerning .kerning").kerning(8),
            Text("\n.tracking (letter-spacing)").tracking(8),
            
            Text("\n⭐️ inline system image: Five ")
                + Text(Image(systemName: "star.circle.fill")).foregroundColor(.yellow)    
                + Text(" Stars"),
            
            Text("\n⭐️ markdown: Go for [apple.com](https://apple.com)"),
        ]
        .reduce(into: Text("normal")) { result, text in
            result = result + Text(" ") + text
        }
        .lineSpacing(10)
        .foregroundColor(.secondary)
    }
}

Text uses only a subset of the attributes defined in AttributeScopes.FoundationAttributes.

Text renders all InlinePresentationIntent attributes except for lineBreak and softBreak.
It also renders the link attribute as a clickable link.
Textignores any other Foundation-defined attributes in an attributed string.

Sarun ⟩
- How to align text center/leading/trailing in SwiftUI
- How to style SwiftUI text Font
Five Stars ⟩ SwiftUI patterns: passing & accepting views - inline image
AppCoda ⟩ Learn SwiftUI ⟩ Working with Text ⭐️
Paul ⟩ How to combine text views together - Text + Text.
Swift Wombat ⟩ How to style Text view in SwiftUI ⭐️

PreviousDivider NextFont

Last updated 1 month ago

Was this helpful?

// ⭐️ 設定小數位數(Slider 常用) // 小數位數 ↴ Text("scale：\(scale, specifier: "%0.2f")") // 兩位小數 .font(.system(.body, design: .monospaced)) // ⭐️ 使用等寬字體

import SwiftUI struct ContentView: View { var body: some View { VStack(alignment: .leading, spacing: 20) { texts Color.secondary.frame(height: 0.5) textWithBG } .padding(40) } } extension ContentView { /// ⭐ text with background is NO MORE a `Text`❗❗❗ var textWithBG: some View { HStack { Text("⚠️") Text(" .background ").background(Color.pink) Text(" is ") + Text("NO MORE").bold().foregroundColor(.pink) + Text(" a `Text`❗") } } /// texts in different styles var texts: some View { [ Text(".bold").bold(), Text(".italic").italic(), Text(".foregroundColor").foregroundColor(.green), Text(".font(.title)").font(.title), Text("\n.fontWeight(.heavy)").fontWeight(.heavy), Text(".font(.system(size:40))").font(.system(size: 40)), Text("\n.strikethrough").strikethrough(), Text(".strikethrough(true, color: .red)").strikethrough(true, color: .red), Text("\n.underline").underline(), Text(".underline(true, color: .blue)").underline(true, color: .blue), Text(".baseline") + Text("Offset(10)").baselineOffset(10).font(.caption), Text("\n.kerning .kerning .kerning").kerning(8), Text("\n.tracking (letter-spacing)").tracking(8), Text("\n⭐️ inline system image: Five ") + Text(Image(systemName: "star.circle.fill")).foregroundColor(.yellow) + Text(" Stars"), Text("\n⭐️ markdown: Go for [apple.com](https://apple.com)"), ] .reduce(into: Text("normal")) { result, text in result = result + Text(" ") + text } .lineSpacing(10) .foregroundColor(.secondary) } }