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

Question

我正在尝试在SwiftUI中使用浅色和深色模式，但我很难获得适合浅色和深色模式的突出颜色。例如苹果展示的SystemGray(0-6)颜色。

我尝试在我的或上使用.background(Color.primary/secondary)，但似乎没有一个好看的颜色。它要么是黑色，要么是深灰色。似乎没有苹果所说的第三或第四种颜色。如何使应用程序的颜色与健康应用程序匹配？在浅色模式下，浅灰色屏幕背景和白色按钮，然后在深色模式下有黑色背景和深灰色按钮？

目前，在我的下面的代码中，我仅为测试而使用蓝色背景，因为primary/secondary不起作用。有人找到了一种正确工作的方法吗？

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)

- Layne Trout

---

主色和次要色是真正的前景色。您尝试过在主色或次要色上使用colorInvert作为背景吗？ - Michael Salmon

UIColor 定义了许多系统颜色，例如 systemBackground，并且有一个使用 UIColor 的 Color 初始化器，以便您可以间接获取所需的颜色。 - Michael Salmon

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/

- Daniel Ryan

---

好主意。奇怪的是SwiftUI直接没有这个访问器，但使用UIColor作为基础是一个聪明的解决方法。 - TheNeil

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

- user7014451

Answer 3

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

Color(uiColor: UIColor.systemGray6)

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

在Assets.xcassets中，单击底部的+，然后选择“新颜色集”。 给您的颜色命名。 在属性检查器内的“外观”中，选择“任意，暗”。 然后，您可以为每种模式设置不同的颜色，并将其名称用作应用程序中的颜色。

- Paul B