如何在 SwiftUI 中的堆栈上设置背景颜色

Question

我正在尝试在 SwiftUI 中使用明暗模式，但我正在努力获得适合明暗模式的提升颜色。比如苹果展示的 SystemGray(0-6) 颜色。

我试图在我的 VStack 或 HStack 上使用 .background(Color.primary/secondary) ，但它似乎没有很好的颜色。它是黑色或深灰色。没有接缝是 Apple 谈论的第三或第四颜色。如何让应用程序的颜色与健康应用程序相匹配？浅灰色屏幕背景和白色背景的按钮在浅色模式下，然后在深色模式下有黑色背景和深灰色按钮？

目前，在我下面的代码中，我使用蓝色背景只是为了测试，因为主要/次要不起作用。有没有人找到让这个正常工作的方法？

                VStack
                {
                    Text("8:20").fontWeight(.semibold).font(.system(size: 80)).foregroundColor(.primary)
                    Text("Hours worked").font(.body).foregroundColor(.secondary)
                }
                .padding()
                .background(Color.blue)
                .cornerRadius(15)
                .shadow(radius: 10)

Answer 1

看起来 SwiftUIColor类的颜色数量有限，似乎不完整。我需要默认的背景颜色，所以我可以添加一些透明度。

这UIColor门课systemBackground正是我所需要的。我能够使用这个解决我的问题：

VStack(){ /** Code here **/}.background(Color(UIColor.systemBackground).opacity(0.95))

您可能会在 UIColor 中找到更多适合您想要的颜色。 https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/

Answer 2

我可能误解了您的问题，但您是在询问确定设备是处于亮模式还是暗模式？（您的示例代码在两种模式下的工作方式相同）？如果是这样，您是否尝试过使用Environment变量colorScheme？

@Environment (\.colorScheme) var colorScheme:ColorScheme

以及一个关于主题使用的例子：

extension Color {
    static let blue = Color.blue
    static let yellow = Color.yellow

    static func backgroundColor(for colorScheme: ColorScheme) -> Color {
        if colorScheme == .dark {
            return yellow
        } else {
            return blue
        }
    }
}

struct ContentView: View {
    @Environment (\.colorScheme) var colorScheme:ColorScheme
    var body: some View {
        VStack
        {
            Text("8:20").fontWeight(.semibold).font(.system(size: 80)).foregroundColor(.primary)
            Text("Hours worked").font(.body).foregroundColor(.secondary)
        }
        .padding()
        .background(Color.backgroundColor(for: colorScheme))
        .cornerRadius(15)
        .shadow(radius: 10)    
    }
}