ios - 无法使用 SwiftUI 实现暗模式

Question

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

我正在使用上面的代码在我的演示项目中实现暗模式，但它不起作用。
任何帮助或见解将不胜感激。

Answer 1

这似乎是 Xcode 11.0 beta 中的一个错误。一个临时的解决方法是将您的内容包装在NavigationView.

例如下面的代码在深色模式预览中不会生效：

var body: some View {
  Text("Hello World")
}

但是在将内容包装在 中后NavigationView，暗模式预览按预期工作：

var body: some View {
  NavigationView {
    Text("Hello World")
  }
}

结果：

Answer 2

暗模式在预览中工作了一半，它只是忘记绘制背景。

以下解决方法允许您添加.darkModeFix()到您ContentView()的预览功能。您可以选择添加false作为参数以关闭暗模式。

struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .darkModeFix()
        }
    }
}

只需在项目中的某处添加以下内容：

public struct DarkView<Content> : View where Content : View {
    var darkContent: Content
    var on: Bool
    public init(_ on: Bool, @ViewBuilder content: () -> Content) {
        self.darkContent = content()
        self.on = on
    }

    public var body: some View {
        ZStack {
            if on {
                Spacer()
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                    .background(Color.black)
                    .edgesIgnoringSafeArea(.all)
                darkContent.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).background(Color.black).colorScheme(.dark)
            } else {
                darkContent
            }
        }
    }
}

extension View {
    public func darkModeFix(_ on: Bool = true) -> DarkView<Self> {
        DarkView(on) {
            self
        }
    }
}

Answer 3

它修复了预览，但没有更改我的代码

import SwiftUI

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



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ZStack {
                Color.black.edgesIgnoringSafeArea(.all)
                ContentView().environment(\.colorScheme, .dark)

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

Answer 4

显然是一个错误。即使做MyView().colorScheme(.dark)也行不通。
右键单击（右键单击或按住 Ctrl 键单击）“播放”按钮（用于模拟运行应用程序）。单击调试预览。打开调试区域。然后，您可以使用环境覆盖来配置暗/亮模式、动态类型、可访问性设置等。

顺便说一句，要打开 Enviroment Overrides 设置，请转到调试器上方并按下此按钮：