如何在同一画布中预览多个视图 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)")
        
    }
}

我指定了多个版本进行显示。所有的版本都返回到同一个预览属性中。但是，画布一次只显示一个预览视图。我想同时看到所有四个版本的预览。就像我在其他开发者的视图上看到的那样。

- ScottyBlades

Answer 1

在Xcode 14中，单个画布中显示多个独立预览的能力已被删除。苹果工程师在官方WWDC 2022 Slack上明确回答了这个问题。其中一位回复如下：

我们收到了一些关于新预览体验的问题，每个预览都有自己的选项卡，人们想知道是否有办法在同一个选项卡中拥有多个预览。

PreviewProvider 中的每个视图现在都会显示在自己的选项卡中。如果各个视图是不同配置的列表行或可以在 VStack 中组合，则可以使用单个预览来查看不同的配置。如果您有一个独特的情况，认为当前的解决方案无法覆盖，请告诉我们您的反馈！

另一位回复如下：

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

首先，您可以使用新的变量模式从画布底部的工具栏中查看设备设置的变化，以在同一个标签中查看多个预览。

其次，对于相同视图的多个预览，但输入不同的情况下，您可以制作一个包含这些不同配置的 List 或 VStack 的单个预览。这在 List 的行中特别有帮助，因为 List 也会显示具有正确列表样式和指标的视图。

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

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

- rob mayoff

---

这是一个倒退的步骤。 我想要看到我的视图的两个预览并排显示。 - Ben Thomas

耶，苹果你到底在搞什么？这简直是胡闹，完全不是帮助的反面。至少让开发者自己决定吧，你干嘛插手？ - LilaQ

Answer 2

你仍然可以添加多个预览。通过使用新的SwiftUI宏，你将在画布部分看到预览选项卡。

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

- Taka