Xcode 11 常用预览设置

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

预览

1
struct ContentView_Previews: PreviewProvider {
2
    static var previews: some View {
3
        ContentView()
4
    }
5
}

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

设置预览型号

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

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

自定义大小

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

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

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

1
static var previews: some View {
2
    ContentView()
3
        .previewLayout(.sizeThatFits)
4
}

深色模式

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

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

1
static var previews: some View {
2
    Group {
3
        ContentView().colorScheme(.dark)
4
        ContentView().colorScheme(.light)
5
    }
6
}

注：在 Xcode 11 Beta 3 中，深色模式无法正常显示；

多个设备同时预览

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

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

或者更简单：

1
static var previews: some View {
2
    Group {
3
        ContentView()
4
            .previewDevice("iPhone SE")
5
        ContentView()
6
            .previewDevice("iPhone XR")
7
    }
8
}