在XCode和Android Studio中添加多设备预览-DEV365 开发者社区

使用Swiftui和JetPack组成的开发非常友好。这两个框架都提供了高度可读的声明语法和实时预览功能，该功能在编码时实时更新。该实时预览使开发人员可以轻松配置各种设备设置，尽管指定多个设备因素可能有些麻烦。在PlayTomic，我们为两个平台创建了一个简单的实用程序，使我们可以在预定义的一组设备上运行预览。这是我们所做的：

安卓

这个平台很简单，因为它已经支持开箱即用的汇总注释。您需要做的就是在项目中包含某个地方：

@Preview(showSystemUi = true, device = Devices.PIXEL_4_XL, name = "Pixel 4 XL")   // big xxxhdpi
@Preview(showSystemUi = true, device = Devices.NEXUS_5, name = "Nexus 5")   // small-medium xxhdpi
annotation class MultiDevicePreview

，然后在您的预览中替换@MultiDevicePreview对@Preview的使用：

@MultiDevicePreview
@Composable
private fun AMultiDevicePreview() {
    Text("Multidevice preview")
}

ios

对于iOS来说，事情变得更加复杂。首先，XCode仅识别实现PreviewProvider协议的预览。结果，使用我们的自定义版本的MultiDevicePreviewProvider扩展接口无效。相反，我们创建了第二个协议来解决此问题：

public protocol MultiDevicePreview {
    associatedtype DevicePreviews : View
    @ViewBuilder @MainActor static var devicePreviews: DevicePreviews { get }

    @MainActor static var devices: [PreviewDevice] { get }
    @MainActor static var previewName: String? { get }
}

然后，我们为使用新协议的人提供了预览的默认实现：

public extension PreviewProvider where Self: MultiDevicePreview {
    static var previews: some View {
        ForEach(devices) { device in
            AnyView(devicePreviews)
                .previewDevice(device)
                .previewDisplayName([previewName, device.rawValue].compactMap { $0 }.joined(separator: " - "))
        }
    }

    static var devices: [PreviewDevice] { PreviewDevice.allCases }
    static var previewName: String? { String(describing: Self.self) }
}

我们还声明了一些预定义的设备列表来简化管理：

extension PreviewDevice {
    public static let iPhone14 = PreviewDevice("iPhone 14")
    public static let iPhone14Max = PreviewDevice("iPhone 14 Pro Max")
    public static let iPhoneSE = PreviewDevice("iPhone SE (3rd generation)")
    public static let allCases = [iPhone14, iPhone14Max, iPhoneSE]
}

extension PreviewDevice: Identifiable {
    public var id: String {
        rawValue
    }
}

使用以上所有内容，您可以通过将您的预览符合到MultiDevicePreview并替换devicePreviews的方法来使用多vice预览。

struct AMultiDevicePreview: PreviewProvider, MultiDevicePreview {
    static var devicePreviews: some View {
        Text("multidevice preview text")
    }
}

不是一个巨大的差异，而是工具包的不错的补充！