SwiftUI - Text 文本组件

📖 概述

Text 是 SwiftUI 中最基础的视图组件，用于显示只读文本。它功能强大，支持富文本、多行文本、文本截断等特性。

🎯 基础用法

简单文本

import SwiftUI

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

多行文本

Text("这是第一行\n这是第二行\n这是第三行")

长文本自动换行

Text("这是一段很长很长的文本，当它超过视图宽度时会自动换行显示。SwiftUI 会智能处理文本的布局。")
    .frame(width: 200)  // 限制宽度

🎨 文本样式

字体设置

// 系统预设字体大小
Text("Large Title").font(.largeTitle)
Text("Title").font(.title)
Text("Title 2").font(.title2)
Text("Title 3").font(.title3)
Text("Headline").font(.headline)
Text("Body").font(.body)
Text("Callout").font(.callout)
Text("Subheadline").font(.subheadline)
Text("Footnote").font(.footnote)
Text("Caption").font(.caption)
Text("Caption 2").font(.caption2)

// 自定义字体大小
Text("自定义大小").font(.system(size: 24))

// 自定义字体
Text("自定义字体").font(.custom("Helvetica", size: 20))

// 字重
Text("粗体").fontWeight(.bold)
Text("中等").fontWeight(.medium)
Text("细体").fontWeight(.light)

颜色

// 预设颜色
Text("红色文本").foregroundColor(.red)
Text("蓝色文本").foregroundColor(.blue)

// 自定义颜色
Text("自定义颜色").foregroundColor(Color(red: 0.5, green: 0.5, blue: 0.8))

// 十六进制颜色（需要扩展）
Text("十六进制颜色").foregroundColor(Color(hex: "FF6B6B"))

// 渐变色
Text("渐变文本")
    .foregroundStyle(
        LinearGradient(
            colors: [.red, .blue],
            startPoint: .leading,
            endPoint: .trailing
        )
    )

文本修饰

// 粗体
Text("粗体文本").bold()

// 斜体
Text("斜体文本").italic()

// 删除线
Text("删除线").strikethrough()
Text("红色删除线").strikethrough(true, color: .red)

// 下划线
Text("下划线").underline()
Text("蓝色下划线").underline(true, color: .blue)

// 组合使用
Text("粗体斜体下划线")
    .bold()
    .italic()
    .underline()

📐 文本布局

对齐方式

VStack {
    Text("左对齐的多行文本\n第二行\n第三行")
        .multilineTextAlignment(.leading)
    
    Text("居中对齐的多行文本\n第二行\n第三行")
        .multilineTextAlignment(.center)
    
    Text("右对齐的多行文本\n第二行\n第三行")
        .multilineTextAlignment(.trailing)
}
.frame(width: 200)

行数限制

// 限制为单行
Text("这是一段很长的文本，会被截断")
    .lineLimit(1)

// 限制为2行
Text("这是一段很长的文本\n可以显示两行\n但第三行会被截断")
    .lineLimit(2)

// 不限制行数（默认）
Text("文本内容")
    .lineLimit(nil)

截断模式

Text("这是一段很长的文本，需要截断显示")
    .lineLimit(1)
    .truncationMode(.tail)    // 尾部截断...（默认）

Text("这是一段很长的文本，需要截断显示")
    .lineLimit(1)
    .truncationMode(.head)    // 头部截断

Text("这是一段很长的文本，需要截断显示")
    .lineLimit(1)
    .truncationMode(.middle)  // 中间截断

行间距

Text("第一行\n第二行\n第三行")
    .lineSpacing(10)  // 设置行间距

🎭 富文本

文本拼接

Text("普通文本 ") + 
Text("粗体文本").bold() + 
Text(" 红色文本").foregroundColor(.red)

Markdown 支持 (iOS 15+)

// 自动解析 Markdown
Text("**粗体** *斜体* `代码`")

Text("支持 [链接](https://apple.com)")

Text("""
# 标题
这是**粗体**文本
- 列表项 1
- 列表项 2
""")

AttributedString (iOS 15+)

var attributedString: AttributedString {
    var result = AttributedString("可交互的文本")
    result.font = .title
    result.foregroundColor = .blue
    result.link = URL(string: "https://apple.com")
    return result
}

var body: some View {
    Text(attributedString)
}

🔤 文本选择与复制

可选择文本 (iOS 15+)

Text("这段文本可以被选择和复制")
    .textSelection(.enabled)

🌍 本地化

基础本地化

// 自动使用本地化字符串
Text("hello_key")

// 手动指定
Text(LocalizedStringKey("hello_key"))

// 带参数的本地化
Text("Hello, \\(userName)!")

字符串插值

let name = "张三"
let age = 25

Text("我的名字是\\(name)，今年\\(age)岁")

📊 格式化

数字格式化

let number = 1234.5678

Text(number, format: .number)           // 1,234.568
Text(number, format: .number.precision(.fractionLength(2)))  // 1,234.57
Text(number, format: .currency(code: "CNY"))  // ¥1,234.57
Text(number, format: .percent)          // 123,456.78%

日期格式化

let date = Date()

Text(date, style: .date)               // 2024/01/15
Text(date, style: .time)               // 14:30
Text(date, style: .relative)           // 2 hours ago
Text(date, style: .offset)             // +2 hours
Text(date, style: .timer)              // 计时器格式

🎯 实用示例

标题与副标题组合

VStack(alignment: .leading, spacing: 4) {
    Text("文章标题")
        .font(.headline)
        .foregroundColor(.primary)
    
    Text("2024年1月15日 · 5分钟阅读")
        .font(.caption)
        .foregroundColor(.secondary)
}

价格显示

HStack(alignment: .firstTextBaseline, spacing: 2) {
    Text("¥")
        .font(.caption)
        .foregroundColor(.red)
    
    Text("99")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(.red)
    
    Text(".99")
        .font(.title3)
        .foregroundColor(.red)
}

徽章文本

Text("NEW")
    .font(.caption)
    .fontWeight(.bold)
    .foregroundColor(.white)
    .padding(.horizontal, 8)
    .padding(.vertical, 4)
    .background(Color.red)
    .cornerRadius(4)

💡 最佳实践

1. 使用系统字体 - 优先使用 .font() 的预设样式，支持动态字体大小
2. 注意可访问性 - 使用语义化的字体样式，支持系统字体大小设置
3. 避免硬编码文本 - 使用本地化字符串
4. 合理使用颜色 - 使用 .primary、.secondary 等语义化颜色
5. 性能考虑 - 大量文本使用 LazyVStack 等懒加载容器

⚠️ 常见问题

Q: 文本不换行怎么办？

A: 确保没有设置 .lineLimit(1)，或者设置为 nil

Text("长文本...")
    .lineLimit(nil)  // 允许多行
    .fixedSize(horizontal: false, vertical: true)  // 垂直方向自适应

Q: 如何让文本填满整行？

A: 使用 frame 配合对齐方式

Text("左对齐")
    .frame(maxWidth: .infinity, alignment: .leading)

Q: 如何实现文本渐变色？

A: 使用 .foregroundStyle() 配合渐变

Text("渐变文本")
    .font(.largeTitle)
    .fontWeight(.bold)
    .foregroundStyle(
        LinearGradient(
            colors: [.purple, .pink],
            startPoint: .leading,
            endPoint: .trailing
        )
    )

📚 相关组件

• TextField - 文本输入框
• Label - 图标+文本组合
• Link - 可点击链接

🔗 参考资料

• Apple 官方文档 - Text
• Hacking with Swift - Text

---

掌握 Text 组件，是 SwiftUI 开发的第一步！ 📝