如何在同一画布 SwiftUI 中预览多个视图

Question

struct CardDetailView_Previews: PreviewProvider {
    static var previews: some View {
        CardDetailView(viewModel: .init(labelLabelViewModel: LabelLabel.ViewModel(topText: "hello", bottomText: .lorem)))
            .previewDevice("iPhone 14 Pro Max")
        CardDetailView(viewModel: .init(labelLabelViewModel: LabelLabel.ViewModel(topText: "hello", bottomText: .lorem)))
            .previewInterfaceOrientation(.landscapeLeft)
            .previewDevice("iPhone 14 Pro Max")
        CardDetailView(viewModel: .init(labelLabelViewModel: LabelLabel.ViewModel(topText: "hello", bottomText: .lorem)))
            .previewInterfaceOrientation(.portrait)
            .previewDevice("iPhone SE (3rd generation)")
        CardDetailView(viewModel: .init(labelLabelViewModel: LabelLabel.ViewModel(topText: "hello", bottomText: .lorem)))
            .previewInterfaceOrientation(.landscapeLeft)
            .previewDevice("iPhone SE (3rd generation)")
        
    }
}

我指定了要显示的多个版本。全部返回到相同的预览属性。但是，画布一次仅显示一个预览视图。我想同时看到这四个人。就像我在其他开发人员的观点中看到的那样。

Answer 1

在 Xcode 14 中删除了在单个画布中显示多个独立预览的功能。苹果工程师在官方 WWDC 2022 Slack 中明确回答了这一问题。回应一：

\n

\n

我们\xe2\x80\x99 一直收到一些有关新预览体验的问题，其中每个预览都有自己的选项卡，人们想知道是否有办法在同一选项卡中提供多个预览。

\n

现在的每个视图都PreviewProvider显示在其自己的选项卡中。如果各个视图是列表的不同配置的行或者可以组合在一个视图中VStack，则可以使用单个预览来查看不同的配置。如果您有您认为当前解决方案未涵盖的独特案例，我们\xe2\x80\x99d 希望提供反馈！

\n

\n

另一个回应：

\n

\n

现在，每个视图都PreviewProvider显示在其自己的选项卡中，并且有两种方法可以在一个选项卡中查看多个配置。

\n

首先，您可以使用新的变体模式（可从画布的底部栏访问）在同一选项卡中查看设备设置变化的多个预览。

\n

其次，对于同一视图但具有不同输入的多个预览，您可以对包含这些不同配置的List或进行单个预览VStack。这对于 a 的行特别有用，List因为List还将显示具有正确列表样式和指标的那些视图。

\n

\n

您可以使用“变体”菜单（位于画布底部）来显示单个预览的多个变体：

\n

\n

但除此之外，a 中的每个视图PreviewProvider都有自己的画布选项卡。

\n

Answer 2

您仍然可以添加多个预览。通过使用新的 SwiftUI 宏

您将在画布部分看到预览选项卡

    #Preview("On") {
        Button("hello on")
    }
    
    #Preview("Off") {
        Button("hello off")
    }