SwiftUI-Text组件学习

SwiftUI 中的 Text 组件是一个非常常用的视图组件，用于显示文本内容。它提供了丰富的功能，可以通过多种方式进行定制化，支持样式、修饰符、布局等。下面是一些关于 Text 组件的详细学习内容，涵盖基础、样式和修饰符等方面。

1.基本用法

Text 组件的最基本用法是直接显示一个字符串。

示例

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .padding()
    }
}

2. 常用修饰符

你可以使用一系列的修饰符来定制Text组件的样式。

字体样式

• font: 设置文本的字体和大小。

Text("Hello, World!")
    .font(.title)  // 设置为标题字体

• fontWeight: 设置字体的粗细。

Text("Bold Text")
    .fontWeight(.bold)  // 设置为加粗

字体颜色

• foregroundStyle设置文本的颜色

使用单一颜色

Text("Hello, world!")
    .foregroundStyle(.blue)

使用渐变色

Text("Gradient Text")
    .foregroundStyle(LinearGradient(gradient: Gradient(colors: [.blue, .green]), startPoint: .top, endPoint: .bottom))

使用图像填充

Text("Image Fills Text")
    .foregroundStyle(ImagePaint(image: Image(systemName: "star.fill"), scale: 0.1))

使用多种前景样式组合：

Text("Multi-Style Text")
    .foregroundStyle(LinearGradient(gradient: Gradient(colors: [.blue, .purple]), startPoint: .top, endPoint: .bottom))

文本对齐

• multilineTextAlignment: 设置文本的多行对齐方式。

Text("This is a long text that will wrap into multiple lines.")
    .multilineTextAlignment(.center)  // 文本居中对齐

行高

• lineSpacing: 设置行之间的间距。

Text("This is line 1.\nThis is line 2.")
    .lineSpacing(10)  // 设置行间距为 10

文本修饰

• bold(), italic(), underline(), strikethrough(): 常用文本修饰器。

Text("Bold and Underlined")
    .bold()          // 加粗
    .underline(true, pattern: .solid, color: Color.red)

• strikethrough(): 添加删除线。

Text("This text is striked through.")
    .strikethrough(true, color: .red)  // 添加红色删除线

多行文本

• lineLimit: 设置文本的最大行数。

Text("This is a very long text that might be truncated.")
    .lineLimit(1)  // 限制为一行，超出部分会被截断

行和字符间距

• kerning: 设置字符间距。

Text("Spacing between characters")
    .kerning(2)  // 设置字符间距为 2

3. 富文本 (AttributedString)

Text 组件可以与 AttributedString 配合使用，支持富文本样式。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text(attributedText)
            .padding()
    }

    var attributedText: AttributedString {
        var str = AttributedString("This is an example of AttributedString.")
        
        // 设置 "example" 为粗体和红色
        if let range = str.range(of: "example") {
            str[range].font = .boldSystemFont(ofSize: 20)
            str[range].foregroundColor = .red
        }

        return str
    }
}

• AttributedString 让你可以更灵活地对文本中的不同部分进行样式设置。
• 你可以为文本中的特定部分（如某些单词或字符）应用不同的字体、颜色等样式。

4. 文本显示多行与缩放

• fixedSize(): 防止 Text 被截断或压缩。

Text("A very long text that will not be compressed or truncated.")
    .fixedSize(horizontal: false, vertical: true)

• truncationMode: 设置文本的截断模式。

Text("A very long text that will be truncated.")
    .lineLimit(1)  // 设置为一行
    .truncationMode(.tail)  // 超出部分显示省略号

5. 组合 Text 和其他视图

你可以将多个 Text 组件组合在一起，形成复杂的文本布局。 使用 + 组合多个文本：

Text("Hello, ") + Text("SwiftUI!").font(.title)

嵌套 Text 组件：

Text("This is ")
    .foregroundColor(.red) +
Text("combined with ")
    .bold() +
Text("text")

6. 使用 Text 进行响应式设计

Text 组件可以与 GeometryReader 配合使用，制作响应式设计。

GeometryReader { geometry in
    Text("Responsive Text")
        .frame(width: geometry.size.width * 0.8, height: 50)
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
}

7.添加点击事件

Text 可以结合 onTapGesture 修饰符来响应用户的点击事件。

Text("Tap Me")
    .onTapGesture {
        print("Text tapped!")
    }

8. 调整文本的行高

你可以使用 .lineSpacing() 或 .padding() 来控制文本之间的行高或内边距。

Text("Line 1\nLine 2")
    .lineSpacing(5)  // 行距
    .padding()