swift - 在 SwiftUI 中同时打开多个预览

Question

我知道我们可以在SwiftUI中同时打开不同屏幕的多个预览。任何人都可以帮助我实现这一目标的步骤吗？

Answer 1

您可以按名称提供设备以同时预览多个设备。例如，要预览“iPhone SE”和“iPhone XS Max”，您可以执行以下操作：

#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

支持的设备列表：

@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

我创建了一个GitHub Gist来促进这一点。

基本上创建了一个设备枚举以在某处预览（我更喜欢常量文件）：

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 }
    }
}

然后像这样使用它：

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