SwiftUI 中的 .primary 和 .secondary 颜色是什么？答案

【问题标题】：What are the .primary and .secondary colors in SwiftUI?SwiftUI 中的 .primary 和 .secondary 颜色是什么？
【发布时间】：2019-10-21 07:07:41
【问题描述】：

在新的 SwiftUI 中，Color 类型与 UIKit 中的 UIColor 非常相似。

正如预期的那样，有常见的颜色，但我注意到还有另外两种颜色：

.primary
.secondary

Apple 文档中没有关于不同 Colors 的描述。

这些颜色是什么？
对于某些事情我应该使用哪一个？

【问题讨论】：

标签： swift swiftui

【解决方案1】：

与UIColor 提供的相比，SwiftUI 似乎不完整。主次指的是文字颜色，分别是UIColor.label和UIColor.secondaryLabel。

提供更多UIColor的简单扩展：

public extension Color {
    static let lightText = Color(UIColor.lightText)
    static let darkText = Color(UIColor.darkText)

    static let label = Color(UIColor.label)
    static let secondaryLabel = Color(UIColor.secondaryLabel)
    static let tertiaryLabel = Color(UIColor.tertiaryLabel)
    static let quaternaryLabel = Color(UIColor.quaternaryLabel)

    static let systemBackground = Color(UIColor.systemBackground)
    static let secondarySystemBackground = Color(UIColor.secondarySystemBackground)
    static let tertiarySystemBackground = Color(UIColor.tertiarySystemBackground)

    // There are more..
}

【讨论】：

UIColor.systemBackground 的一个重要特性是它会动态适应明暗模式。如果我们静态设置 systemBackground = Color(UIColor.systemBackground)，它会像 UIColor.systemBackground 一样响应变化吗？还是我们需要 static var systemBackground: Color { Color(UIColor.systemBackground) } 代替？

【解决方案2】：

在 2019 年 6 月 3 日的 iOS 和 macOS 资源更新下，您可以找到：

所有文本样式的主要、次要、第三和第四文本样式变体

请看这里：https://developer.apple.com/design/whats-new/?id=06032019a

暗模式的人机界面指南部分内容如下：

使用系统提供的标签颜色作为标签。主要、次要、三次和四次标签颜色会自动适应浅色和深色外观。如需相关指导，请参阅排版。

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

最后，初步的 iOS 13 开发者文档显示这些是预定义的 UIColors：

初级：

包含主要内容的文本标签的颜色。

因此，secondaryLabel、tertiaryLabel 和 quaternaryLabel 是包含二级或三级或四级内容的文本标签的颜色。

请看这里： https://developer.apple.com/documentation/uikit/uicolor/3173131-label

所以这些是用于文本标签的 UIColors。它们是不同的颜色，取决于它们是重要的内容（例如标题：主要）还是描述标签（次要）等等。最后，它会根据您使用的是浅色模式、深色模式还是高对比度模式自动应用适当的颜色。

有一个 WWDC 2019 视频https://developer.apple.com/videos/play/wwdc2018/210/ 它显示了 Apple Mail 大约 31:40 的一个示例。

如果你倒带一点，动机也解释得非常清楚和很好的例子。

【讨论】：

这些primary和secondary等颜色是SwiftUI为每个项目设置的吗（例如Text）？还是这些通用颜色有不同的深浅？我还是有点迷茫?
我的理解：这些是用于文本标签的普通 UIColors。它们是不同的颜色，取决于它们是重要的内容（例如标题：主要）还是描述标签（次要）等等。最后，它会根据您使用的是浅色模式、深色模式还是高对比度模式自动应用适当的颜色。
是的，可能是。如果您可以进行一些调查以发现它们的真正含义（当然将其添加到您的答案中），那就太好了。这将是一个很大的帮助！ ? 另外，在某些情况下我应该使用哪一个？
有一个 WWDC 视频。他们在那里解释了动机并展示了 Apple Mail 的一个例子。我在答案中添加了该信息。
啊，所以它就像从主题中淡出一样。例如，在浅色模式下，primary 是纯黑色，并且会变得更灰。

【解决方案3】：

这里是一个颜色列表，用于查看明暗模式的差异。

用于生成调色板的代码：

var body: some View {
    VStack {
        HStack {
            Text("Light")
                .frame(width: 75, height: 40)
            Text("Dark")
                .frame(width: 75, height: 40)
        }
        List(CC.colors, id: \.name) { color in
            HStack {
                Text(color.name)
                    .frame(width: 300, alignment: .trailing)
                Rectangle()
                    .environment(\.colorScheme, .light)
                    .frame(width: 75, height: 40)
                    .foregroundColor(color.color)
                    .border(Color.black, width: 3)
                Rectangle()
                    .environment(\.colorScheme, .dark)
                    .frame(width: 75, height: 40)
                    .foregroundColor(color.color)
                    .border(Color.black, width: 3)

            }
        }
        //PlacesListView(places: placesViewModel.places, htmlAttributions: placesViewModel.htmlAttributions)
    }
    .navigationTitle("Places")
   // .embedInNavigationView()
}

颜色列表取自 FarouK 答案。

struct CC {
    let name: String
    let color: Color

    static var colors: [CC] { [
        CC(name: "lightText", color: .lightText),
        CC(name: "darkText", color: .darkText),
        CC(name: "placeholderText", color: .placeholderText),
        CC(name: "label", color: .label),
        CC(name: "secondaryLabel", color: .secondaryLabel),
        CC(name: "tertiaryLabel", color: .tertiaryLabel),
        CC(name: "quaternaryLabel", color: .quaternaryLabel),
        CC(name: "systemBackground", color: .systemBackground),
        CC(name: "secondarySystemBackground", color: .secondarySystemBackground),
        CC(name: "tertiarySystemBackground", color: .tertiarySystemBackground),
        CC(name: "systemFill", color: .systemFill),
        CC(name: "secondarySystemFill", color: .secondarySystemFill),
        CC(name: "tertiarySystemFill", color: .tertiarySystemFill),
        CC(name: "quaternarySystemFill", color: .quaternarySystemFill),
        CC(name: "systemGroupedBackground", color: .systemGroupedBackground),
        CC(name: "secondarySystemGroupedBackground", color: .secondarySystemGroupedBackground),
        CC(name: "tertiarySystemGroupedBackground", color: .tertiarySystemGroupedBackground),
        CC(name: "systemGray", color: .systemGray),
        CC(name: "systemGray2", color: .systemGray2),
        CC(name: "systemGray3", color: .systemGray3),
        CC(name: "systemGray4", color: .systemGray4),
        CC(name: "systemGray5", color: .systemGray5),
        CC(name: "systemGray6", color: .systemGray6),
        CC(name: "separator", color: .separator),
        CC(name: "opaqueSeparator", color: .opaqueSeparator),
        CC(name: "link", color: .link),
        CC(name: "systemRed", color: .systemRed),
        CC(name: "systemBlue", color: .systemBlue),
        CC(name: "systemPink", color: .systemPink),
        CC(name: "systemTeal", color: .systemTeal),
        CC(name: "systemGreen", color: .systemGreen),
        CC(name: "systemIndigo", color: .systemIndigo),
        CC(name: "systemOrange", color: .systemOrange),
        CC(name: "systemPurple", color: .systemPurple),
        CC(name: "systemYellow", color: .systemYellow)]
    }
}

extension Color {
     
    // MARK: - Text Colors
    static let lightText = Color(UIColor.lightText)
    static let darkText = Color(UIColor.darkText)
    static let placeholderText = Color(UIColor.placeholderText)

    // MARK: - Label Colors
    static let label = Color(UIColor.label)
    static let secondaryLabel = Color(UIColor.secondaryLabel)
    static let tertiaryLabel = Color(UIColor.tertiaryLabel)
    static let quaternaryLabel = Color(UIColor.quaternaryLabel)

    // MARK: - Background Colors
    static let systemBackground = Color(UIColor.systemBackground)
    static let secondarySystemBackground = Color(UIColor.secondarySystemBackground)
    static let tertiarySystemBackground = Color(UIColor.tertiarySystemBackground)
    
    // MARK: - Fill Colors
    static let systemFill = Color(UIColor.systemFill)
    static let secondarySystemFill = Color(UIColor.secondarySystemFill)
    static let tertiarySystemFill = Color(UIColor.tertiarySystemFill)
    static let quaternarySystemFill = Color(UIColor.quaternarySystemFill)
    
    // MARK: - Grouped Background Colors
    static let systemGroupedBackground = Color(UIColor.systemGroupedBackground)
    static let secondarySystemGroupedBackground = Color(UIColor.secondarySystemGroupedBackground)
    static let tertiarySystemGroupedBackground = Color(UIColor.tertiarySystemGroupedBackground)
    
    // MARK: - Gray Colors
    static let systemGray = Color(UIColor.systemGray)
    static let systemGray2 = Color(UIColor.systemGray2)
    static let systemGray3 = Color(UIColor.systemGray3)
    static let systemGray4 = Color(UIColor.systemGray4)
    static let systemGray5 = Color(UIColor.systemGray5)
    static let systemGray6 = Color(UIColor.systemGray6)
    
    // MARK: - Other Colors
    static let separator = Color(UIColor.separator)
    static let opaqueSeparator = Color(UIColor.opaqueSeparator)
    static let link = Color(UIColor.link)
    
    // MARK: System Colors
    static let systemBlue = Color(UIColor.systemBlue)
    static let systemPurple = Color(UIColor.systemPurple)
    static let systemGreen = Color(UIColor.systemGreen)
    static let systemYellow = Color(UIColor.systemYellow)
    static let systemOrange = Color(UIColor.systemOrange)
    static let systemPink = Color(UIColor.systemPink)
    static let systemRed = Color(UIColor.systemRed)
    static let systemTeal = Color(UIColor.systemTeal)
    static let systemIndigo = Color(UIColor.systemIndigo)

}

【讨论】：

【解决方案4】：

SwiftUI 中仍然缺少系统颜色，并且我没有找到使用原色和辅助色的正确方法，在此之前您可以使用此扩展将所有 UIColors 带入 SwiftUI：

extension Color {
     
    // MARK: - Text Colors
    static let lightText = Color(UIColor.lightText)
    static let darkText = Color(UIColor.darkText)
    static let placeholderText = Color(UIColor.placeholderText)

    // MARK: - Label Colors
    static let label = Color(UIColor.label)
    static let secondaryLabel = Color(UIColor.secondaryLabel)
    static let tertiaryLabel = Color(UIColor.tertiaryLabel)
    static let quaternaryLabel = Color(UIColor.quaternaryLabel)

    // MARK: - Background Colors
    static let systemBackground = Color(UIColor.systemBackground)
    static let secondarySystemBackground = Color(UIColor.secondarySystemBackground)
    static let tertiarySystemBackground = Color(UIColor.tertiarySystemBackground)
    
    // MARK: - Fill Colors
    static let systemFill = Color(UIColor.systemFill)
    static let secondarySystemFill = Color(UIColor.secondarySystemFill)
    static let tertiarySystemFill = Color(UIColor.tertiarySystemFill)
    static let quaternarySystemFill = Color(UIColor.quaternarySystemFill)
    
    // MARK: - Grouped Background Colors
    static let systemGroupedBackground = Color(UIColor.systemGroupedBackground)
    static let secondarySystemGroupedBackground = Color(UIColor.secondarySystemGroupedBackground)
    static let tertiarySystemGroupedBackground = Color(UIColor.tertiarySystemGroupedBackground)
    
    // MARK: - Gray Colors
    static let systemGray = Color(UIColor.systemGray)
    static let systemGray2 = Color(UIColor.systemGray2)
    static let systemGray3 = Color(UIColor.systemGray3)
    static let systemGray4 = Color(UIColor.systemGray4)
    static let systemGray5 = Color(UIColor.systemGray5)
    static let systemGray6 = Color(UIColor.systemGray6)
    
    // MARK: - Other Colors
    static let separator = Color(UIColor.separator)
    static let opaqueSeparator = Color(UIColor.opaqueSeparator)
    static let link = Color(UIColor.link)
    
    // MARK: System Colors
    static let systemBlue = Color(UIColor.systemBlue)
    static let systemPurple = Color(UIColor.systemPurple)
    static let systemGreen = Color(UIColor.systemGreen)
    static let systemYellow = Color(UIColor.systemYellow)
    static let systemOrange = Color(UIColor.systemOrange)
    static let systemPink = Color(UIColor.systemPink)
    static let systemRed = Color(UIColor.systemRed)
    static let systemTeal = Color(UIColor.systemTeal)
    static let systemIndigo = Color(UIColor.systemIndigo)

}

【讨论】：

【解决方案5】：

我们可以通过提供Color 的扩展来更改.primary 和.secondary 的颜色，如下所示：

extension Color {
    public static let primary = Color("SomeCustomColor") //Color that we have set in Assets catalog
    public static let secondary =  Color.green
}

【讨论】：

从 Xcode 11.3 开始阻止预览编译
我猜这是因为已经有颜色属性称为主要和次要属性

【解决方案6】：

我也一直在探索这个。似乎 .primary 设置为“环境的强调色”。所以我最好的猜测是它是基于平台的系统设置，可能会受到特定主题（如暗模式）的影响。仍然不确定您是否可以像 Android 主题一样自行更改它。在 iOS 13 中使用 .primary 会呈现浅蓝色。

关于这些细节的documentation 目前似乎相当稀少。

【讨论】：