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

Question

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

我试图在我的

.background(Color.primary/secondary)

或

VStack

上使用

HStack

，但它似乎没有很好的颜色。它是黑色或深灰色。 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

貌似SwiftUI

Color

类的颜色有限，看起来不完整。我需要默认背景颜色，这样我就可以添加一些透明度。

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)    
    }
}

Answer 3

这种情况的最佳解决方案是从 UIColor 派生系统颜色。

Color(uiColor: UIColor.systemGray6)

如果您需要自定义主题相关颜色，您可以在 Assets.xcassets 中配置自定义颜色集。您可以在那里为浅色模式定义一种颜色，为深色模式定义另一种颜色。然后就像使用任何其他颜色名称一样，在整个应用程序中使用此颜色集名称。

在 Assets.xcassets 中，单击底部的 +，然后单击“New Color Set”。 给你的颜色一个名字。 在属性检查器的“外观”中，选择“任何，深色” 然后您可以为每个设置不同的颜色，然后在您的应用程序中使用它的名称作为您的颜色。