SwiftUI Text 图文混排富文本的技巧

在近期的一些项目中，我使用了较多 SwiftUI 来实现界面开发。在这个过程中，我也积累了一些实用的小技巧。比如，最近的一个需求就是 在 SwiftUI 中用 Text 实现图文混排 —— 也就是富文本（Rich Text）的效果。

很多开发者初次接触 SwiftUI 时，会以为 Text 只能显示单纯的字符串。但实际上，Text 非常灵活，结合一些技巧，就能实现不同样式文字拼接、Emoji/符号嵌入，甚至带图标的富文本排版。

1. 多段 Text 拼接

最简单的方式，就是把多个 Text 拼接在一起：

Text("SwiftUI ")
    .font(.title)
+ Text("图文混排")
    .font(.title)
    .foregroundColor(.blue)

Text 可以通过 + 运算符组合，渲染时保持同一行，但每段文字依然保留各自样式。这就可以轻松实现：

部分文字加粗
部分文字换颜色
部分文字更改字体

2. 在文字中嵌入图标

SwiftUI 原生支持 SF Symbols，可以用 Image(systemName:) 引入图标。常见方法是用 HStack：

HStack {
    Image(systemName: "star.fill")
        .foregroundColor(.yellow)
    Text("收藏")
}

但如果希望图标和文字像一体，可以将 Image 转为 Text：

Text(Image(systemName: "star.fill")) + Text(" 收藏")

这样，图标直接嵌入文字流中，高度自动对齐，更自然。

3. 使用 Emoji & 特殊字符

Emoji 是图文混排的天然利器。例如：

Text("SwiftUI 开发很有趣 🚀✨")
    .font(.title2)

在 UI 中，用 Emoji 替代小图标，既高效又易于渲染。

4. 富文本段落组合

希望在同一段文字中部分加粗、部分变色时，可以用多段 Text 拼接：

Text("SwiftUI ")
    .font(.headline)
+ Text("Text 富文本")
    .bold()
    .foregroundColor(.blue)
+ Text(" 技巧分享")
    .italic()
    .foregroundColor(.secondary)

渲染效果像一段连续文字，但样式层次分明。

5. 使用 AttributedString（iOS 15+）

当需要更强大的控制（如部分字体、超链接、动态样式）时，可以使用 AttributedString：

var richText: AttributedString {
    var str = AttributedString("SwiftUI 富文本技巧")
    str.foregroundColor = .blue
    str.font = .system(size: 20, weight: .bold)
    
    if let range = str.range(of: "富文本") {
        str[range].foregroundColor = .red
        str[range].underlineStyle = .single
    }
    return str
}

Text(richText)

这种方式类似 NSAttributedString，语法简洁，并与 SwiftUI 无缝结合。

6. Markdown 支持（iOS 15+）

SwiftUI Text 支持 Markdown 语法，实现加粗、斜体、超链接：

Text("这是 **加粗**，这是 *斜体*，这是 [链接](https://developer.apple.com)")

Markdown 非常适合显示后台返回的文案，无需手动拼接 Text。

总结

Text 在 SwiftUI 中远不止是“显示字符串”的控件，它是一个功能强大的富文本组件。常用技巧包括：

Text 拼接：不同样式文字无缝组合
嵌入图标：用 Text(Image(systemName:)) 实现图文混排
Emoji & 符号：用表情符号增强表现力
AttributedString：强大的富文本控制（动态样式、超链接等）
Markdown 支持：轻松展示带格式的文案

通过这些技巧，你可以用极简的 SwiftUI 代码快速实现丰富排版效果，让界面更灵活、更生动。