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

xlpyo6sf  于 2023-05-05  发布在  Swift
关注(0)|答案(3)|浏览(244)

我试图在SwiftUI中使用亮暗模式,但我很难获得适合亮暗模式的提升颜色。例如苹果展示的SystemGray(0-6)颜色。
我尝试在我的VStackHStack上使用.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)
pkmbmrz7

pkmbmrz71#

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

8fsztsew

8fsztsew2#

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

wswtfjt73#

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

Color(uiColor: UIColor.systemGray6)

如果需要自定义主题相关颜色,可以在Assets.xcassets中配置自定义颜色集。在那里,您可以为亮模式定义一种颜色,为暗模式定义另一种颜色。然后,只需在整个应用中使用此颜色集名称,就像使用任何其他颜色名称一样。
在Assets.xcassets中,单击底部的+,然后单击“NewColorSet”。给予你的颜色起个名字在属性检查器的“外观”中,选择“任意,深色”然后您可以为每种颜色设置不同的颜色,然后将其名称用作应用中的颜色。

相关问题