大概整理了在 Xcode 11 中使用 SwiftUI 的常用预览设置。

预览

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

这是新建 SwiftUI 项目时 ContentView 中的默认代码,开启预览的话,会显示 iPhone XR 模拟器,并在下方显示 Preview;那么,可以先试试自定义预览模拟器型号和名称。

设置预览型号

static var previews: some View {
    ContentView()
        // 想要预览的型号
        .previewDevice("iPhone SE")
        // 设置预览名称
        .previewDisplayName("iPhone SE")
}

要查看支持的型号,按住 Option + 鼠标左键点击 .previewDevice 即可;或者点击 .previewDevice 后,在右侧 Help inspector 查看。

自定义大小

当前版本的预览并不支持横向模式,不过可以用另一种方法临时代替:

static var previews: some View {
    ContentView()
        // 568*320 是 iPhone SE 的屏幕点分辨率
        .previewLayout(.fixed(width: 568, height: 320))
}

不过缺点是无法匹配外观,同时也无法在这个界面下使用实时预览功能。另外就是可以让预览根据视图显示大小:

static var previews: some View {
    ContentView()
        .previewLayout(.sizeThatFits)
}

深色模式

static var previews: some View {
    ContentView()
        .colorScheme(.dark) // 深色模式
}

当然,默认的便是 .ligth,也可以两者一起使用:

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

注:在 Xcode 11 Beta 3 中,深色模式无法正常显示;

多个设备同时预览

如果想查看代码在不同设备的运行情况,当然可以建立多个 PreviewProvider,或者按照官方教程所示:

static var previews: some View {
    ForEach(["iPhone SE", "iPhone XS Max"].identified(by: \.self)) { deviceName in
        LandmarkList()
            .previewDevice(PreviewDevice(rawValue: deviceName))
            .previewDisplayName(deviceName)
    }
}

或者更简单:

static var previews: some View {
    Group {
        ContentView()
            .previewDevice("iPhone SE")
        ContentView()
            .previewDevice("iPhone XR")
    }
}

信息

版本

  • Xcode 11.00 Beta 3 (11M362v)
  • macOS 10.15 Beta 3 (19A501i)

参考