SwiftUI中如何将SFSymbol嵌入AttributedString并实现样式控制

需求说明 #

希望实现：文本“Hello, world!”显示为蓝色，嵌入的globe SF Symbol显示为红色。目前通过LocalizedStringKey在Text中嵌入了Symbol，但无法单独设置各部分样式，想了解是否可以用AttributedString实现，或者其他替代方案。

原实现代码：

struct ContentView: View {
    // I'd like to use AttributedString instead.
    var string: LocalizedStringKey {
        "Hello, world! \(Image(systemName: "globe"))"
    }
    
    var body: some View {
        Text(string)
    }
}

方案一：使用AttributedString实现分部分样式 #

SwiftUI的AttributedString支持直接嵌入Image（包括SF Symbol），并可以为不同片段单独设置样式。示例代码如下：

struct ContentView: View {
    var styledAttributedString: AttributedString {
        // 创建文本片段并设置蓝色
        var textPart = AttributedString("Hello, world! ")
        textPart.foregroundColor = .blue
        
        // 创建SF Symbol片段并设置红色
        var symbolPart = AttributedString(Image(systemName: "globe"))
        symbolPart.foregroundColor = .red
        
        // 拼接两个片段
        textPart.append(symbolPart)
        return textPart
    }
    
    var body: some View {
        Text(styledAttributedString)
    }
}

核心逻辑是将文本和Symbol拆分为独立的AttributedString片段，分别配置样式后再拼接，完全利用SwiftUI原生的AttributedString能力，适合需要复杂文本样式的场景。

方案二：无需AttributedString的替代方案（Text视图拼接） #

如果样式需求不复杂，可以直接利用SwiftUI的Text拼接特性，每个Text视图单独设置样式后组合：

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .foregroundColor(.blue)
        + Text(Image(systemName: "globe"))
            .foregroundColor(.red)
    }
}

如果需要支持本地化，只需将文本替换为LocalizedStringKey即可：

Text(LocalizedStringKey("Hello, world!"))
    .foregroundColor(.blue)
+ Text(Image(systemName: "globe"))
    .foregroundColor(.red)

这种方案更轻量化，符合SwiftUI的视图组合逻辑，不需要处理AttributedString的细节，适合简单的样式拆分需求。

内容的提问来源于stack exchange，提问作者Curious Jorge