Skip to main content

SwiftUI专辑027-预览黑暗模式

· 预计阅读2分钟

headerimg SwiftUI内置支持黑暗模式。你只需要修改预览的设置，就能预览黑暗模式。 接下来我们将通过一个简单的例子演示一下。

Getting ready​

创建个新的SwiftUI工程：DarkModePreview

How to do it​

自从 SwiftUI 出现以来，预览就存在一个问题，您无法在黑暗模式下预览任何视图，除非视图包含在NavigationView 中。这是一个功能还是一个错误？希望我们能在下一版 SwiftUI 中得到答案。

我们将在NavigationView 中包含一个Text，并在light和dark模式下预览它。步骤如下：

  1. 打开ContentView.swift
  2. 添加一个环境变量
@Environment(\.colorScheme) var deviceColorScheme
  1. 添加一个NavigationView
NavigationView {
    Text(deviceColorScheme == .dark ? "Quick journey to the dark side" : "Back to the light")
}

  1. 在Content_Previews中添加一个colorScheme
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView().colorScheme(.dark)
            ContentView().colorScheme(.light)
        }
    }
}

此时能够在preview中查看到：

截屏2021-12-29 下午11.19.13

image-20211229231931515

How it works​

在黑暗模式下预览内容的过程是不言自明的。预览显示来自ContentView视图的内容。如果未向预览提供配色方案，则使用.light作为默认配色方案。

为了在明暗模式下显示不同的文本，我们添加了一个deviceColorScheme环境变量。然后，我们在Text视图中使用三元运算符将其值更改为在检测到深色方案时显示Quick journey to the dark side，并在检测到浅色方案时 Back to the light。