在 SwiftUI 中，使用 #Preview{} 来添加预览非常方便，它能够让你实时看到视图在不同设备和情境下的表现。不过，在使用 #Preview{} 时，有几个需要注意的点：

1. 确保正确的环境配置 #

• SwiftUI 预览默认会使用当前设备的大小和环境，但你可以通过 .previewDevice() 来指定不同的设备。
• 例如：

  #Preview {
      ContentView()
          .previewDevice("iPhone 14")
  }
  

2. 使用 .previewLayout() 设置布局 #

• 你可以通过 .previewLayout() 来控制预览的布局方式，尤其是当你希望预览特定的布局时，像是 .sizeThatFits（根据内容自适应大小）或 .fixed(width: height:)（指定固定宽高）。
• 例如：

  #Preview {
      ContentView()
          .previewLayout(.sizeThatFits)
  }
  

3. 设置多个预览 #

• 如果你想要查看多个视图的预览，可以使用 .previewGroup() 来在同一个预览中展示不同的配置。
• 例如：

  #Preview {
      ContentView()
          .previewLayout(.fixed(width: 300, height: 200))
  }
  .previewDisplayName("Fixed Layout")
  
  #Preview {
      ContentView()
          .previewLayout(.sizeThatFits)
  }
  .previewDisplayName("Size That Fits")
  

4. 自定义预览环境 #

• 你可以通过 .environment() 来模拟不同的环境变量，例如颜色模式（浅色或深色）或本地化。
• 例如：

  #Preview {
      ContentView()
          .environment(\.colorScheme, .dark)  // 模拟暗黑模式
  }
  

5. 适配不同的设备和环境 #

• 你可以同时创建不同设备、不同环境的多个预览。例如：

  #Preview {
      ContentView()
          .previewDevice("iPhone 12")
          .environment(\.colorScheme, .light)
  }
  
  #Preview {
      ContentView()
          .previewDevice("iPad Pro (11-inch) (3rd generation)")
          .environment(\.colorScheme, .dark)
  }
  

6. 简化复杂视图的预览 #

• 对于一些较为复杂的视图组件，可以创建一个简化版的 PreviewProvider 来帮助你轻松展示不同场景或数据，避免在每次预览时都需要调整大量参数。
• 例如：

  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
          ContentView()
              .previewLayout(.sizeThatFits)
              .environment(\.colorScheme, .dark)
      }
  }
  

7. 预览数据的变化 #

• 在 #Preview{} 中使用不同的数据源进行预览（比如使用虚拟数据），这可以帮助你查看视图如何应对不同的数据输入情况。
• 例如：

  #Preview {
      List(items) { item in
          Text(item.name)
      }
      .previewLayout(.fixed(width: 300, height: 400))
  }
  

总结： #

• 使用 #Preview{} 时，可以通过调整设备类型、环境配置、布局方式等来灵活控制预览的效果。
• 它使得你能够实时查看视图的表现，帮助快速迭代和调试。

PreviewProvider #

#Preview 和 PreviewProvider 都是用于在 SwiftUI 中进行预览的方式，但它们有一些关键的区别和适用场景：

1. #Preview（Swift 5.7+） #

• 语法： #Preview{} 是一个新的语法糖，在 Swift 5.7 及之后的版本中引入，主要是为了简化预览的书写方式。
• 适用范围： 适合快速、简洁地为视图添加预览，尤其是在单个视图的简单预览场景中。
• 特点：
  • 语法简洁，几乎不需要额外的结构或类。
  • 更适合快速迭代和临时预览，能够直接在视图代码附近查看结果。
  • 支持自定义环境（例如：colorScheme）等。
  • 适用于小型项目或单独的视图组件。

例如：

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
    }
}

#Preview {
    ContentView()
        .previewLayout(.sizeThatFits)
}

优点：

• 直接在视图文件中进行预览，非常方便快捷。
• 适用于小型视图，或是在开发过程中快速查看组件效果。

2. PreviewProvider（标准方式） #

• 语法： PreviewProvider 是传统的方式，它要求创建一个遵循 PreviewProvider 协议的结构体，并实现 previews 属性。
• 适用范围： 适合在大型项目或需要多个不同配置预览的场景中，能够管理更复杂的预览配置。
• 特点：
  • 通过一个结构体明确地定义预览配置，使得代码结构更清晰且易于扩展。
  • 适合需要多个预览视图或复杂数据源的场景（例如，多个设备、不同的本地化或环境）。
  • 通过实现 PreviewProvider，你可以灵活地组合不同的视图配置和数据。

例如：

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewLayout(.sizeThatFits)
            .environment(\.colorScheme, .dark)
    }
}

优点：

• 更适合大规模的、复杂的预览需求。
• 支持多个预览配置和设备预览，易于管理不同视图的多样化展示。

主要区别： #

何时选择哪个？ #

• #Preview{}：适用于简单、临时的视图预览或当你希望快速查看某个视图的外观时。它是一个简化的语法，可以让你快速查看视图效果。
• PreviewProvider：适用于需要多种配置、多个设备的复杂视图预览，或者当你希望有更多控制权时。它的代码结构更清晰，特别是在一个视图或组件有多种预览需求时。

总体来说，#Preview{} 是一个简化和快速的工具，而 PreviewProvider 提供更强的扩展性和灵活性，适合更复杂的预览需求。