The Util Designer
SwiftUI Text元件的使用
xcode 13.4.1, swift 5.5, iOS 15.4
2022-08-15
顯示Text的元件，應該是所有App最常用的元件之一，這次講講Text的使用。
1. 基本使用。
import SwiftUI

struct TextExample: View {
    var body: some View {
        Text("Learning SwiftUI")
    }
}
2. 使用font的方法去設置一些SwiftUI內定的樣式。
import SwiftUI

struct TextExample: View {
    var body: some View {
        Text("Learning SwiftUI")
            .font(.largeTitle)
    }
}
3. 使用foregroundColor設置文字的顏色：
import SwiftUI

struct TextExample: View {
    var body: some View {
        Text("Learning SwiftUI")
            .font(.largeTitle)
            .foregroundColor(.teal)
    }
}
4. 使用Font.system方法提供了更多的選擇去設置文字：
import SwiftUI

struct TextExample: View {
    var body: some View {
        Text("Learning SwiftUI")
            .font(Font.system(size: 40, weight: .heavy, design: .rounded))
            .foregroundColor(.teal)
    }
}
5. 若文字太長，Text會自動進行換行：
import SwiftUI

struct TextExample: View {
    var body: some View {
        Text("wiftUI helps you build great-looking apps across all Apple platforms with the power of Swift — and surprisingly little code. You can bring even better experiences to everyone, on any Apple device, using just one set of tools and APIs.")
            .font(Font.system(size: 30, weight: .thin, design: .rounded))
            .foregroundColor(.teal)
    }
}
6. 可以使用multilineTextAlignment來設置文字對齊：
import SwiftUI

struct TextExample: View {
    var body: some View {
        Text("""
It is hot.
The sky is blue.
A little cloud comes looking for you.
More clouds come.
They bring rain.
Sing and dance.
It's cool again!
""")
            .multilineTextAlignment(.center)
            .font(Font.system(size: 20, weight: .heavy, design: .rounded))
            .foregroundColor(.teal)
    }
}
7. SwiftUI也提供了3D的旋轉來制作3D 文字樣式：
import SwiftUI

struct TextExample: View {
    var body: some View {
        Text("""
It is hot.
The sky is blue.
A little cloud comes looking for you.
More clouds come.
They bring rain.
Sing and dance.
It's cool again!
""")
            .multilineTextAlignment(.center)
            .font(Font.system(size: 20, weight: .heavy, design: .rounded))
            .foregroundColor(.teal)
            .rotation3DEffect(.degrees(30.0), axis: (x: 1, y: 0, z: 0))
    }
}