SwiftUI代码中Color与Assets颜色集颜色显示不匹配问题

核心诱因 #

• 色域不匹配：Xcode Assets新建Color Set时默认使用Display P3广色域，而代码中通过Color(red:green:blue:)初始化的颜色默认使用sRGB色域。相同RGB数值跨色域映射时会出现明显色偏：sRGB下的深灰(34,34,34)放到P3色域下会因亮度映射偏差显示为接近纯黑，高饱和蓝色也会出现色彩失真。
• 命名不匹配：Color("名称")的初始化方式对字符串大小写、字符完全敏感，若代码中传入的名称和Assets中颜色集的实际命名不完全一致，会直接加载失败，返回默认纯黑/透明色。
• 外观配置错误：若颜色集误配置为仅支持深色/仅支持浅色模式，在相反的系统外观下会出现颜色加载异常。

修复步骤 #

1. 统一颜色色域
   • 打开Assets目录下对应的颜色集，选中颜色配置块，打开右侧属性检查器，将Color Space选项从默认的Display P3修改为sRGB
   • 重新填入目标RGB值：深灰色对应R:34、G:34、B:34，蓝色对应R:23、G:121、B:232，不透明度保持100%
2. 校验命名一致性
   • 逐一核对Color扩展中传入的字符串和Assets内颜色集名称，确保大小写、下划线、空格完全匹配，例如代码中写Color("MenuOptionsBackground")时，Assets内的颜色集名称不能写为menuOptionsBackground或MenuoptionsBackground
3. 修正外观配置
   • 在颜色集属性检查器的Appearances选项中，选择None做全局适配，或根据业务需求分别配置Any/Light/Dark模式下的颜色值，确保当前运行环境对应模式下有有效颜色配置

修复后可直接使用定义好的颜色常量做预览验证，示例代码：

struct CircularButtonWithImage_Previews: PreviewProvider {
    static var previews: some View {
        CircularButtonWithImage(imageName:"settings",
                                imageBackgroundColor: .menuOptionsBackground,
                                imageForegroundColor: .menuOptionsForeground,
                                imageFrameWidth: 20.0,
                                imageFrameHeight: 20.0,
                                imagePadding: 10.0)
    }
}

若上述操作后仍存在异常，删除Xcode的DerivedData缓存后重新编译即可，低版本iOS（iOS14及以下）偶现的颜色加载缓存问题可通过该方式解决。

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