Xcode 11-SwiftUI预览黑暗模式

Question

在Xcode 11中，我们可以通过在调试区域底部切换“环境替代”来启用暗模式，以使应用程序运行。

SwiftUI具有Canvas编辑器，可在您构建界面时生成应用程序的实时预览。

有没有一种方法可以在这些预览中切换到暗模式？

Answer 1

域名注册地址：

只需将.background(Color(UIColor.systemBackground))和.environment(\.colorScheme, .dark)修饰符添加到预览中即可。有关解释、示例、一些修改和一些使其更漂亮、更简单的提示，请阅读整个答案。

解释

我知道这个问题已经很老了，但是我找到了一种实现起来不太痛苦并且不需要在 NavigationView 中进行任何包装的方法。此外，它还保留了 的正确行为.previewLayout(.sizeThatFits)。

本质上，当你定义一个符合 的 struct 时PreviewProvider，你只是在定义内容，但预览的背景是由 Xcode 为你管理的。因此，应用.environment(\.colorScheme, .dark)只会将实际视图更改为暗模式，而不是背景。NavigationView解决这个问题的原因很简单——它为视图添加了一个背景，覆盖了预览的所有白色背景。

修复本身也相当简单 - 您需要做的就是在预览中为您的视图添加背景。所以对于像这样的简单视图：

struct ExampleView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

和一组这样的预览：

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ExampleView()
            ExampleView()
                .environment(\.colorScheme, .dark)
        }.previewLayout(.sizeThatFits)
    }
}

您会得到如下所示的输出：

为了使第二个预览出现在深色背景上，请通过调用.background(Color(UIColor.systemBackground))视图添加它：

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ExampleView()
            ExampleView()
                .background(Color(UIColor.systemBackground))
                .environment(\.colorScheme, .dark)
        }.previewLayout(.sizeThatFits)
    }
}

你会得到两个这样的预览：

额外选项

您可以进行多种修改。首先，根据单元格所在的层，您可以UIColor.systemBackground用UIColor.secondarySystemBackground或替换UIColor.tertiarySystemBackground。在人机界面指南或UIColor 开发人员文档的 UI 元素颜色部分中阅读有关动态系统颜色的更多信息。

最后，如果您要经常使用它并且不想UIColor每次都写出整个调用，那么创建一个扩展Color并将它们定义为静态变量可能是一个好主意：

extension Color {
    static let systemBackground = Color(UIColor.systemBackground)
    static let secondarySystemBackground = Color(UIColor.secondarySystemBackground)
    static let tertiarySystemBackground = Color(UIColor.tertiarySystemBackground)
}

然后你可以用Color(UIColor.systemBackground)更好的Color.systemBackground.

Answer 2

在预览文件的底部，您应该有类似的内容。这是Xcode用来生成预览的内容：

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

要将预览更改为暗模式，只需指定一个colorScheme：

static var previews: some View {
    ContentView().colorScheme(.dark)
}

或者，您甚至可以选择同时预览亮和暗模式：

static var previews: some View {
    Group {
        ContentView().colorScheme(.light)
        ContentView().colorScheme(.dark)
    }
}

我建议观看SwiftUI简介会话，以获取更多SwiftUI示例以及预览功能的强大之处。

Answer 3

注意：在撰写本文时，您需要一个 NavigationView 作为 .environment(.colorScheme, .dark) 工作的顶级视图。但是随后（大）导航栏覆盖了色块，因此两个导航栏修饰符使栏变小并隐藏它......有点。这可能是 Xcode 中的一个错误。

来源 - 付费内容

我在 Xcode 11.2.1 上对此进行了测试，但问题NavigationView仍然存在。除非您的整个视图都包含在NavigationView. 您可以尝试隐藏NavigationView使用 .navigationBarTitle("")& .navigationBarHidden(true)。

例子：

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Light vs Dark Mode")

            // Uncomment these lines if you don't want the navigation bar
            // .navigationBarTitle("")
            // .navigationBarHidden(true)

            // You can also apply a colorScheme here
            // which will impact how the view looks when the app
            // is launched on device. Regardless of the users theme settings
        }// .environment(\.colorScheme, .dark)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        // ContentView().environment(\.colorScheme, .dark)
        // ContentView().environment(\.colorScheme, .light)

        // If you want you can display both schemes in a group
        Group {
            ContentView()
            .environment(\.colorScheme, .light)

           ContentView()
           .environment(\.colorScheme, .dark)
       }
    }
}

暗模式下的示例预览：