如何在字符串中适配明暗背景渲染多色SF Symbols？

问题原因 #

嵌入Text的SF Symbol是以AttributedString附件的形式存在，不会继承父视图的environment(\.colorScheme)设置，因此直接给外层容器加environment修饰符无法影响文本内的符号渲染。

可行解决方案 #

1. 使用AttributedString控制符号样式（推荐，兼容翻译需求）

通过构建AttributedString，将SF Symbol作为附件插入，并单独设置其颜色。这种方式能保持文本的完整性，避免拆分文本导致的翻译问题。

func formattedCardText() -> AttributedString {
    // 基础文本保持完整，便于翻译识别
    var baseText = AttributedString("=> ")
    
    // 创建SF Symbol并转为AttributedString附件
    let spadeSymbol = Image(systemName: "suit.spade.fill")
    var symbolAttachment = AttributedString(AttachmentContainer(spadeSymbol))
    
    // 根据背景指定符号颜色（白色背景用黑色，黑色背景用白色）
    symbolAttachment.foregroundColor = .black
    
    // 拼接文本与符号
    baseText += symbolAttachment
    baseText += " <="
    
    return baseText
}

// 调用示例（白色背景场景）
HStack {
    Image(systemName: "heart.fill")
    Image(systemName: "suit.club.fill")
    Text(formattedCardText())
}
.symbolRenderingMode(.multicolor)
.frame(width: 200, height: 50)
.background(.white)

如果需要适配不同背景，可将颜色参数传入方法动态调整：

func formattedCardText(symbolColor: Color) -> AttributedString {
    var baseText = AttributedString("=> ")
    let spadeSymbol = Image(systemName: "suit.spade.fill")
    var symbolAttachment = AttributedString(AttachmentContainer(spadeSymbol))
    symbolAttachment.foregroundColor = symbolColor
    baseText += symbolAttachment
    baseText += " <="
    return baseText
}

// 黑色背景场景调用
Text(formattedCardText(symbolColor: .white))

2. 直接给Text设置前景色（适合非多色符号场景）

如果不需要保留SF Symbol的多色渲染，可直接给Text添加foregroundColor修饰符，文本和内嵌符号会统一使用指定颜色：

HStack {
    Image(systemName: "heart.fill")
    Image(systemName: "suit.club.fill")
    Text("=> \(Image(systemName: "suit.spade.fill")) <=")
        .foregroundColor(.black) // 白色背景下设置黑色
}
.frame(width: 200, height: 50)
.background(.white)

visionOS适配注意事项 #

visionOS没有系统级深色模式，无需依赖colorScheme环境变量，直接通过上述两种方法指定符号颜色即可实现浅色背景显示深色文本/符号的效果。

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