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

【问题标题】：How to set background color on stacks in SwiftUI如何在 SwiftUI 中的堆栈上设置背景颜色
【发布时间】：2019-12-24 05:22:00
【问题描述】：

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

我尝试在我的 VStack 或 HStack 上使用 .background(Color.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)

【问题讨论】：

主要和次要颜色是真正的前景色。您是否尝试过在主要或次要背景上使用 colorInvert？
UIColor 定义了许多系统颜色，例如systemBackground 并且有一个使用 UIColor 的 Color 初始化程序，以便您可以间接获得所需的颜色。

标签： swift xcode view swiftui

【解决方案1】：

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

Color(uiColor: UIColor.systemGray6)

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

在 Assets.xcassets 中，单击底部的 +，然后单击“新建颜色集”。给你的颜色一个名字。在属性检查器的“外观”中，选择“任何，深色” 然后，您可以为每种颜色设置不同的颜色，然后将其名称用作应用中的颜色。

【讨论】：

【解决方案2】：

看起来 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/

【讨论】：

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

【解决方案3】：

我可能误解了您的问题，但您是在询问确定设备是处于亮模式还是暗模式？（您的示例代码在两种模式下的工作方式相同）？如果是这样，您是否尝试过使用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)    
    }
}

【讨论】：