# Text

[SwiftUI](..) ⟩ [Controls]() ⟩ Text

{% hint style="success" %}
:star: 基本語法
{% endhint %}

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

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

{% tabs %}
{% tab title="💾 程式" %}
{% tabs %}
{% tab title="等寬字體" %}
```swift
// ⭐️ 設定小數位數(Slider 常用)
//                           小數位數 ↴
Text("scale：\(scale, specifier: "%0.2f")")       // 兩位小數
    .font(.system(.body, design: .monospaced))    // ⭐️ 使用等寬字體
```
{% endtab %}

{% tab title="多行對齊" %}
```swift
// ⭐️ 多行對齊
Text("first line\nsecond line\nthird line")
    .multilineTextAlignment(.center)    // ⭐️ 還有 .leading, .trailing
```
{% endtab %}
{% endtabs %}

![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FrbhRM98cYmNLcYfnNZF7%2FTexts.png?alt=media\&token=f3ed2058-ce53-42a2-a771-4cb091f12fb6)

```swift
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)
    }
}
```
{% endtab %}

{% tab title="🔴 主題" %}
* [number-of-lines](text/number-of-lines "mention")
* [adjusting-text](../view/modifier/adjusting-text "mention")
{% endtab %}

{% tab title="👥 相關" %}
* [slider](slider "mention")
* can be aligned by using [.frame](../view/layout/frame/.frame "mention"). 👉 See: [Sarun](https://sarunw.com/posts/how-to-align-text-in-swiftui/)
* a [view](../view/view "mention") for [string](../../swift/type/category/basic/string "mention").
* can be styled using [attributedstring](../../swift/type/category/basic/string/attributedstring "mention").
* supports [markdown](text/markdown "mention").
* can be rendered with [gradient](../../custom/ext/gradient "mention").
* can change [font](text/font "mention").
{% endtab %}

{% tab title="📘 手冊" %}
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Text Input and Output](https://developer.apple.com/documentation/swiftui/text-input-and-output) ⟩&#x20;
  * [Text](https://developer.apple.com/documentation/swiftui/text) ⟩
    * [Text(\_ attributedContent: AttributedString)](https://developer.apple.com/documentation/swiftui/text/init\(_:\)-1a4oh)
    * [.bold()](https://developer.apple.com/documentation/swiftui/text/bold\(\))
    * [Text + Text](https://developer.apple.com/documentation/swiftui/text/+\(_:_:\))
  * [Font](https://developer.apple.com/documentation/swiftui/font) ⟩
    * [system(\_:design:weight:)](https://developer.apple.com/documentation/swiftui/font/system\(_:design:weight:\))：specifies style, design, and weight.
    * [system(size:weight:design:)](https://developer.apple.com/documentation/swiftui/font/system\(size:weight:design:\))：specifies a system font.
* [Foundation](https://developer.apple.com/documentation/foundation) ⟩ [Strings and Text](https://developer.apple.com/documentation/foundation/strings_and_text) ⟩ [AttributedString](https://developer.apple.com/documentation/foundation/attributedstring) (**struct**)
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
[`Text`](https://developer.apple.com/documentation/swiftui/text) uses only a <mark style="color:orange;">**subset**</mark> of the attributes defined in [`AttributeScopes.FoundationAttributes`](https://developer.apple.com/documentation/foundation/attributescopes/foundationattributes).&#x20;

* `Text` renders all [`InlinePresentationIntent`](https://developer.apple.com/documentation/foundation/inlinepresentationintent) attributes except for [`lineBreak`](https://developer.apple.com/documentation/foundation/inlinepresentationintent/3787563-linebreak) and [`softBreak`](https://developer.apple.com/documentation/foundation/inlinepresentationintent/3787564-softbreak).&#x20;
* It also renders the [`link`](https://developer.apple.com/documentation/foundation/attributescopes/foundationattributes/3764633-link) attribute as a clickable link.&#x20;
* `Text`<mark style="color:red;">**ignores any other**</mark> Foundation-defined attributes in an attributed string.
{% endhint %}
{% endtab %}

{% tab title="🖥️ 影片" %}
{% embed url="https://youtu.be/tOHxxegyxbo" %}
tundsdev ⟩ Adding Text & TextStyles in SwiftUI
{% endembed %}
{% endtab %}

{% tab title="📗 參考" %}
* [ ] Sarun ⟩&#x20;
  * [ ] [How to align text center/leading/trailing in SwiftUI](https://sarunw.com/posts/how-to-align-text-in-swiftui/)
  * [ ] [How to style SwiftUI text Font](https://sarunw.com/posts/swiftui-text-font/)
* [ ] Five Stars ⟩ [SwiftUI patterns: passing & accepting views](https://www.fivestars.blog/articles/swiftui-patter-passing-views/) - inline image
* [x] AppCoda ⟩ Learn SwiftUI ⟩ [Working with Text](https://www.appcoda.com/learnswiftui/swiftui-text.html) ⭐️
* [x] Paul ⟩ [How to combine text views together](https://www.hackingwithswift.com/quick-start/swiftui/how-to-combine-text-views-together) - Text <mark style="color:red;">**`+`**</mark> Text.
* [x] Swift Wombat ⟩ [How to style Text view in SwiftUI](https://swiftwombat.com/how-to-style-text-view-in-swiftui/) ⭐️
{% endtab %}

{% tab title="❓" %}
{% hint style="warning" %}
問：如何幫文字設定各種格式❓如何排版文字❓
{% endhint %}
{% endtab %}
{% endtabs %}
