SwiftUI PreviewProvider泛型函数：如何传入视图参数生成多设备预览？

完全可以实现！通过创建一个通用的预览容器组件，你可以把HomeViewDemo()、MainView()等任意视图作为参数传入，自动生成所有指定设备的预览，彻底消除重复代码。

步骤1：整理设备列表 #

先把你的WPDevice.Phone中的设备信息整理成数组，方便后续遍历：

extension WPDevice.Phone {
    // 将所有手机设备的名称和描述整理为数组
    static let allPhoneDevices: [(name: String, description: String)] = [
        (name: iPnoneSize0, description: iPnoneSize0.description),
        (name: iPnoneSize1, description: iPnoneSize1.description),
        (name: iPnoneSize2, description: iPnoneSize2.description),
        (name: iPnoneSize3, description: iPnoneSize3.description),
        (name: iPnoneSize4, description: iPnoneSize4.description),
        (name: iPnoneSize5, description: iPnoneSize5.description),
        (name: iPnoneSize6, description: iPnoneSize6.description),
        (name: iPnoneSize7, description: iPnoneSize7.description)
    ]
}

步骤2：创建通用预览容器 #

定义一个遵循View协议的泛型结构体，接受任意视图作为内容：

struct MultiDevicePreview<Content: View>: View {
    private let content: Content
    
    // 使用@ViewBuilder支持闭包式传入视图
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        // 遍历所有设备，生成对应预览
        ForEach(WPDevice.Phone.allPhoneDevices, id: \.name) { device in
            content
                .previewDevice(PreviewDevice(rawValue: device.name))
                .previewDisplayName(device.description)
        }
    }
}

步骤3：在各视图预览中使用 #

现在你可以在任意视图的PreviewProvider中复用这个容器，只需传入目标视图即可：

// HomeViewDemo的预览
struct HomeViewDemo_Previews: PreviewProvider {
    static var previews: some View {
        MultiDevicePreview {
            HomeViewDemo()
        }
    }
}

// MainView的预览
struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        MultiDevicePreview {
            MainView()
        }
    }
}

// AccountView的预览
struct AccountView_Previews: PreviewProvider {
    static var previews: some View {
        MultiDevicePreview {
            AccountView()
        }
    }
}

这样不管你有多少个视图需要多设备预览，都只需几行代码搞定，完全避免了重复编写设备预览的冗余代码。

内容的提问来源于stack exchange，提问作者Dan709