如何以正确的方式在 SwiftUI 中使用颜色？ （特别适用于具有 Light 和 DarkMode 的应用程序）

Posted 2023-02-24

【中文标题】如何以正确的方式在 SwiftUI 中使用颜色？ （特别适用于具有 Light 和 DarkMode 的应用程序）

【英文标题】：How to use Colors in SwiftUI the right way? (Specially for Applications with Light and DarkMode)

【发布时间】：2021-05-18 08:21:02

【问题描述】：

我有一个关于 SwiftUI 和暗模式编程的小问题。 到目前为止，我正在快速编程 4 个月，我想开始为深色模式和浅色模式编程。

在 SwiftUI 中，有一些方法可以为某些内容着色，例如 Text。 如果我想从文本绿色中为前景着色，有以下方法可以做到（如果我错了，请纠正我）：

.foregroundColor(.green)
.foregroundColor(Color.green)
.foregroundColor(Color(UIColor.green))
.foregroundColor(Color(UIColor.systemGreen)) <- I usually do this

在浅色模式下，这是可行的，但如果我切换到深色模式，我的一些组件的颜色会有所不同，例如，如果我有一个黑色的前景，这个前景现在是白色的。 但是对于其他一些组件，它是黑色的。

你们能给我一个示例，我应该如何正确地为 Darkmode 编程？我应该使用以上 4 种方法中的哪一种？还是有不同的方法？或者你有其他使用 SwiftUI 为前景色和背景着色的技巧吗？

注意：我并不是想为特定问题找到解决方案，我只是想了解所有颜色和不同的着色方法在 SwiftUI 中是如何工作的。我已经用谷歌搜索了一些东西，但没有找到我理解的东西，所以我在这里试试运气：D

【参考方案1】：

第一行、第二行和最后一行显示相同的颜色。第三行不同。

.green 和 Color.green 无论如何都是同义词。在 SwiftUI 中，基本颜色（.red、.green...）与 UIKit 中对应的.systemRed、.systemGreen...颜色相同。

你可以通过运行这段代码来证明

struct ContentView: View 
    var body: some View 
        VStack 
            Rectangle()
                .fill(Color.green)
            Rectangle()
                .fill(Color(UIColor.systemGreen))
            Rectangle()
                .fill(Color(UIColor.green))
        
    
 

struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        ContentView()
        ContentView()
            .colorScheme(.dark)
    

前两种颜色相同，但在明暗模式下略有不同。第三种颜色在两种模式下都是固定的。没有理由在 SwiftUI 中使用 UIColor 的 system... 颜色。

您可以在资产目录中为明暗模式创建具有不同外观的自定义颜色，并将其与init(_:bundle:)一起使用

【讨论】：

谢谢，这很有帮助

【参考方案2】：

颜色是 SwiftUI 中的一个视图。

UIColor 是 UIKit 的子类。

你可以用 UIColor 初始化 Color，支持深色模式的标准颜色有“系统”前缀systemBlue、systemGreen...

所以如果你想使用苹果标准色支持深色模式，你应该使用第4种方法

.foregroundColor(Color(UIColor.systemGreen))

P/s：你可以使用颜色资源然后用它的名字初始化

.foregroundColor(Color("colorName"))

【讨论】：

您的 P/s 非常好 ^^ 不知道这也可以，但是如果我想在深色和浅色模式下让它变黑，我应该使用什么？然后我应该使用其他 3 个还是这 3 个之间也有区别？谢谢你:)