【SwiftUI基础篇】支持SwiftUI中的深色模式(Dark)常见的几种方案

默认情况下，SwiftUI支持深色模式。基本上，如果您正在构建一个简单的应用程序是不需要大量自定义样式，大多数事情都应该开箱即用——如果您从浅色模式切换到深色模式，所有内置视图的前景和背景颜色都会发生变化，反之亦然。如果我们需要自定义颜色时需要确保彻底自定义并覆盖每个默认行为。

自适应颜色是指那些根据活动用户界面样式或SwiftUI中已知的ColorScheme而变化的颜色。您可以通过两种方式添加这些。

一、使用Assets.xcassets

在Assets.xcassets里新建自己不同模式下的颜色，这算是最简单的一同方式了。最简单（也可能是最好的）方法是向您的资产添加新的颜色集。在那里，您可以为浅色、深色和默认配色方案提供不同的颜色：

之后，只需在代码中加载Color：

extension Color {
  static let textColor = Color("TextColor")
}

只需将此颜色应用到您想要的地方，如果界面样式/配色方案：

Form {
  Text("网络人")
  TextField("TextField", text: .constant("www.55mx.com"))
  Toggle("切换", isOn: .constant(true))
}
.foregroundColor(.textColor)

二、利用代码调整颜色

如果您愿意，您也可以以编程方式创建自适应Color。为此，您需要从UIColor桥接，因为它有一个初始化器，允许自己根据当前的界面样式/配色方案动态更新： 

extension UIColor {
  convenience init(light: UIColor, dark: UIColor) {
    self.init { traitCollection in
      switch traitCollection.userInterfaceStyle {
      case .light, .unspecified:
        return light
      case .dark:
        return dark
      @unknown default:
        return light
      }
    }
  }
}

extension Color {
  init(light: Color, dark: Color) {
    self.init(UIColor(light: UIColor(light), dark: UIColor(dark)))
  }
}

定义一个默认的背景颜色：

extension Color {
  static let defaultBackground = Color(light: .white, dark: .black)
}

使用方式：

Text("55mx.com").background(Color.defaultBackground)

三、通过环境变量获取到当前状态

虽然自适应颜色应该足以满足大多数用例，但有时您可能希望根据当前配色方案渲染不同的用户界面。这样做，只需点击名为colorScheme的环境值： 

@Environment(.colorScheme) var colorScheme: ColorScheme

var body: some View {
  Text((colorScheme == .dark) ? "现在是暗黑模式" : "正常模式")
}

小技巧：预览和模拟器中的深色模式

struct Content_Previews: PreviewProvider {
  static var previews: some View {
   Text("meishiq.com")
      .colorScheme(.dark) //在这里设置预览器的模式
  }
}

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/194