在 SwiftUI 中同时打开多个预览

Question

I know we can open multiple previews of different screens at the same time in SwiftUI . Can anyone help me with the steps to achieve that?

Answer 1

You can provide devices by their name to preview multiple devices at the same time. For example to preview "iPhone SE" and "iPhone XS Max" you can do like below:

#if DEBUG
struct ContentView_Previews: PreviewProvider {
     static var previews: some View {
          ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) { deviceName in
               ContentView()
                    .previewDevice(PreviewDevice(rawValue: deviceName))
                    .previewDisplayName(deviceName)
          }
     }
}
#endif

The list of supported devices:

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
extension View {

    /// Overrides the device for a preview.
    ///
    /// If `nil` (default), Xcode will automatically pick an appropriate device
    /// based on your target.
    ///
    /// The following values are supported:
    ///
    ///     "Mac"
    ///     "iPhone 7"
    ///     "iPhone 7 Plus"
    ///     "iPhone 8"
    ///     "iPhone 8 Plus"
    ///     "iPhone SE"
    ///     "iPhone X"
    ///     "iPhone Xs"
    ///     "iPhone Xs Max"
    ///     "iPhone Xʀ"
    ///     "iPad mini 4"
    ///     "iPad Air 2"
    ///     "iPad Pro (9.7-inch)"
    ///     "iPad Pro (12.9-inch)"
    ///     "iPad (5th generation)"
    ///     "iPad Pro (12.9-inch) (2nd generation)"
    ///     "iPad Pro (10.5-inch)"
    ///     "iPad (6th generation)"
    ///     "iPad Pro (11-inch)"
    ///     "iPad Pro (12.9-inch) (3rd generation)"
    ///     "iPad mini (5th generation)"
    ///     "iPad Air (3rd generation)"
    ///     "Apple TV"
    ///     "Apple TV 4K"
    ///     "Apple TV 4K (at 1080p)"
    ///     "Apple Watch Series 2 - 38mm"
    ///     "Apple Watch Series 2 - 42mm"
    ///     "Apple Watch Series 3 - 38mm"
    ///     "Apple Watch Series 3 - 42mm"
    ///     "Apple Watch Series 4 - 40mm"
    ///     "Apple Watch Series 4 - 44mm"
    public func previewDevice(_ value: PreviewDevice?) -> Self.Modified<_TraitWritingModifier<PreviewDevice?>>

    /// Overrides the size of the container for the preview.
    ///
    /// Default is `.device`.
    public func previewLayout(_ value: PreviewLayout) -> Self.Modified<_TraitWritingModifier<PreviewLayout>>

    /// Provides a user visible name shown in the editor.
    ///
    /// Default is `nil`.
    public func previewDisplayName(_ value: String?) -> Self.Modified<_TraitWritingModifier<String?>>
}

Answer 2

I created a GitHub Gist to facilitate this.

Basically created a enum of devices to preview somewhere (I prefer a Constants file):

enum MyDeviceNames: String, CaseIterable {
    case iPhoneX = "iPhone X"
    case iPhoneXs = "iPhone Xs"
    case iPhoneXsMax = "iPhone Xs Max"

    static var all: [String] {
        return MyDeviceNames.allCases.map { $0.rawValue }
    }
}

Then use it like this:

struct SampleView_Previews_MyDevices: PreviewProvider {
    static var previews: some View {
        ForEach(MyDeviceNames.all, id: \.self) { devicesName in
            SampleView()
                .previewDevice(PreviewDevice(rawValue: devicesName))
                .previewDisplayName(devicesName)
        }
    }
}

Answer 3

I would like to approach this way

enum Devices: String {
    case iphone7 = "iPhone 7"
    case iphone12 = "iPhone 12"

}

extension View {
    
    func previewDevice(device: Devices) -> some View {
        previewDevice(PreviewDevice(rawValue: device.rawValue))
            .previewDisplayName(device.rawValue)
    }
    
    func previewDevices(devices: [Devices]) -> some View {
        ForEach(devices, id: \.self) { device in
            previewDevice(device: device)
        }
    }
}


My question is: can we preview different iOS version, like iOS 14 and 15?