SwiftUI-Text使用

使用Text視圖顯示指定的文字

import SwiftUI

struct ContentView: View {
    // body屬性的類型為View協議，View是SwiftUI所有界面元素的基礎類型。
    // 遵循View協議並實現必須的body屬性
    var body: some View {
        // VStack（垂直排列視圖）可以將其內部的多個視圖，在垂直方向進行等距排列
        VStack(spacing: 4.0){
            // 添加文本視圖，文本加粗
            Text("Hello, world!").bold()
            // 添加文本視圖，文本傾斜
            Text("Hello, world!").italic()
            // 添加文本視圖，文本下划線
            Text("Hello, world!").underline()
            // 添加文本視圖，文本下划線的顏色為橙色
            Text("Hello, world!").underline(true,color: .orange)
            // 添加文本視圖，文本添加刪除線
            Text("Hello, world!").strikethrough()
            // 添加文本視圖，文本添加刪除線，設置刪除線為橙色
            Text("Hello, world!").strikethrough(true,color: .orange)
            // 添加文本視圖，設置文本顏色為橙色
            Text("Hello, world!").foregroundColor(.orange)
            // 添加文本視圖，設置文本向上的偏移值為15，設置文本的背景色為橙色
            Text("Hello, world!").baselineOffset(15).background(Color.orange)
            // 添加文本視圖，設置背景圖片，設置文本在視圖底部
            Text("Hello, Pic!").background(Image("Pic"),alignment: .bottom).foregroundColor(.white).font(.system(size: 13))
        // 由於VStack最多可以容納十個子視圖，
        // 我們在Vstack視圖的內部添加一個子VStack視圖，就可以添加任意多的子視圖
        VStack{
            // 添加文本視圖，設置文字的字體尺寸為腳注樣式
            Text("Hello, world!,footnote").font(.footnote)
            // 添加文本視圖，設置字體大小為36
            Text("Hello, world!").font(.system(size:36))
            // 添加文本視圖，設置文字的字體為標題樣式，該樣式可以根據屏幕尺寸的大小，自動調整自身的尺寸
            Text("Hello, world!,Automatic").font(.system(.title,design: .monospaced)).lineLimit(2)
            // 添加文本視圖，設置文字的字體，尺寸為36
            Text("Hello, world!").font(.custom("BradleyHandITCTT-Bold", size: 36))
            // 添加文本視圖，通過字體粗細屬性設置加粗效果
            Text("Hello, world!").fontWeight(Font.Weight.heavy)
            // 添加文本視圖，通過字體粗細屬性設置顯示纖細文字
            Text("Hello, world!").fontWeight(Font.Weight.ultraLight)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

---

Text視圖的段落屬性

import SwiftUI

struct ContentView: View {

    var body: some View {
        // 通過段落屬性可以調整文字的間距、行距、偏移值、框架和對齊方式等視覺樣式
        VStack(spacing: 4.0){
            // 添加文本視圖，文本加粗
            Text("Hello, world!")
            // 添加文本視圖，設置字體屬性的字距為10
            Text("www.hdjc8.com").tracking(10)
            // 添加文本視圖，設置字體屬性的字距為10。字距調整屬性表示一對字元的字距
            Text("www.hdjc8.com").kerning(10)
            // 添加文本視圖，給文本視圖添加模糊效果，並設置模糊效的半徑為1
            Text("www.hdjc8.com").blur(radius: 1)
            // 添加一個具有長文字內容的文本視圖，設置文本視圖的行距為20，同時不限制文字的行數
            Text("www.hdjc8.com,www.hdjc8.com,www.hdjc8.com,www.hdjc8.com,www.hdjc8.com,www.hdjc8.com,").multilineTextAlignment(.leading).lineSpacing(11).lineLimit(nil)
            // 添加文本視圖，設置文字向右側偏移40的距離
            Text("www.hdjc8.com").offset(x: 40, y: 0)
            // 添加文本視圖，設置寬度為200，高度為80，文字位於文本視圖的右下角，顏色為橙色
            Text("www.hdjc8.com").frame(width: 200, height: 80, alignment: .bottomTrailing).background(Color.orange)
            VStack{
                // 添加文本視圖，設置寬度為300，高度為100，文字位於文本視圖的右下角
                // position方法會使對其屬性失效，因此文字不再位於視圖的右下角，會向右和向下各偏移50點的位置
                Text("www.hdjc8.com").position(x: 50, y: 50).frame(width: 300, height: 100, alignment: .bottomTrailing).background(Color.orange)
                // 添加文本視圖，設置可以顯示4行文字
                // 最后調用多行文字的對齊方法
                // multilineTextAlignment:多行文本對齊
                Text("西瓜\n香蕉\n蘋果\n車厘子").frame(width: 200, height: 100).lineLimit(4).multilineTextAlignment(.center)
            }
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

---

Text視圖的填充屬性

import SwiftUI

struct ContentView: View {

    var body: some View {
        // 使用填充屬性，修改文字內容和文本視圖邊框之間的距離，即修改文本視圖的上下左右的內邊距
        VStack(spacing: 4.0){
            // 添加文本視圖，文本加粗
            // background：背景顏色
            // foregroundColor:前景顏色
            Text("Hello, world!")
                .background(Color.black)
                .foregroundColor(.white)
                .padding(20)
            
            // 鏈式調用的順序由上而下，
            // 所以首先設置第二個文本視圖的那邊句，
            // 然后再給文本視圖設置背景顏色和字體顏色，
            // 這時那邊句也會有有相應的背景顏色
            Text("Hello, world!")
                .padding(20)
                .background(Color.black)
                .foregroundColor(.white)
            
            // 創建多個填充屬性，創建由外向內顏色漸變的邊框
            // 設置文字樣式為巨型標題樣式
            Text("Hello, world!")
                .font(.largeTitle)
                .padding(15)
                .background(Color.yellow)
                .padding(15)
                .background(Color.orange)
                .padding(10)
                .background(Color.red)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

---