json格式文件预览_如何创建可重复使用的swiftui预览，可以将其另存为json文件

json格式文件预览

SwiftUI previews offer the only way to see your UI without building it and running it on a simulator or device. It’s true that storyboards allowed you to see how your constraints would lay out subviews, but you couldn’t exactly run Swift code at the same time. With SwiftUI previews, you are looking at a fully initialized version of that screen of your app, and the screen doesn’t even need to be made with SwiftUI.

SwiftUI预览是查看UI的唯一方法，而无需构建UI并在模拟器或设备上运行它。 的确，情节提要允许您查看约束如何布置子视图，但您无法同时完全运行Swift代码。 使用SwiftUI预览，您正在查看的是该应用程序屏幕的完全初始化版本，而该屏幕甚至不需要使用SwiftUI进行制作。

NSHipster provides a guide to using SwiftUI previews for UIKit that makes it easy to see a live version of your storyboard-based or programmatically created UIViewControllers and UIViews.

NSHipster提供一个指导使用SwiftUI预览为UIKit中 ，可以很容易地看到你的或程序创建的基于故事板，真人版UIViewControllers和UIViews 。

SwiftUI previews are fairly easy to create. Any struct in a file that conforms to the PreviewProvider protocol will be shown in the canvas. The canvas can be shown or hidden by pressing option, command, and enter (⌥⌘↩). They can preview anything, including views that don’t even reside in the same file. That means you can see your view in its broader context, such as seeing a List row inside the List it belongs to, with dummy data loaded from a local JSON file.

SwiftUI预览非常容易创建。 符合PreviewProvider协议的文件中的任何结构都将显示在画布中。 通过按选项，命令并输入(⌥⌘↩)，可以显示或隐藏画布。 他们可以预览任何内容，包括甚至不在同一文件中的视图。 这意味着您可以在更广泛的上下文中查看视图，例如查看其所属List内的List行以及从本地JSON文件加载的虚拟数据。

I’ve been interested in ways to make SwiftUI previews easier to create and use. While I can’t currently modify how the previews look very much, there are enough options that adding what you want can take more time than it needs to. If you’re creating multiple previews at once, they must be inside a Group because — like anything that returns some View— the previews' static property must return a single value of a single type.

我一直对使SwiftUI预览更易于创建和使用的方法感兴趣。 尽管我目前无法修改预览的外观，但是有足够的选择来添加所需的内容可能会花费更多的时间。 如果您要一次创建多个预览，则它们必须位于Group因为-就像返回some View的对象一样， previews的static属性必须返回单个类型的单个值。

Recently, I’ve been creating four previews. One is for iPhone 8, which was the last iPhone without a camera notch — at least until the recent (and almost identical) iPhone SE was announced. One is for an iPhone with a notch, usually one of the iPhone 11 models. The last two are iPads, probably a 12.9-inch model and one of the three smaller sizes that now exist before you even consider an iPad Mini.

最近，我已经创建了四个预览。 其中一款适用于iPhone 8，这是最后一款没有摄像头的iPhone，至少直到最近发布(几乎相同)的iPhone SE为止。 一种是用于带缺口的iPhone，通常是iPhone 11型号之一。 最后两个是iPad，大概是12.9英寸的型号，是甚至在您考虑使用iPad Mini之前存在的三个较小尺寸之一。

目前需要多少工作 (How Much Work It Currently Takes)

By default, creating four previews takes more work than it needs to.

默认情况下，创建四个预览需要的工作量超过了需要的工作量。

Although I probably wouldn’t necessarily be setting the color scheme and display name for each preview, it’s easy to see how this is already quite complicated, and it’s only four previews. If I wanted to reuse this configuration elsewhere, I would basically need to copy and paste all of these modifiers to the other file. The other issue is that strings are required as raw values to create PreviewDevice instances. I solved this problem first by creating an extension of PreviewDevice that lists all of the iOS 13 devices as constants.

尽管我不一定要为每个预览设置颜色方案和显示名称，但很容易看出这已经很复杂了，而且只有四个预览。 如果我想在其他地方重用此配置，则基本上需要将所有这些修饰符复制并粘贴到另一个文件中。 另一个问题是必须使用字符串作为原始值来创建PreviewDevice实例。 我首先通过创建PreviewDevice扩展来解决此问题，该扩展将所有iOS 13设备列为常量。

将设备作为常量添加到PreviewDevice (Adding the Devices As Constants to PreviewDevice)

Now when writing the parameter of previewDevice, simply type a dot and the autocomplete will suggest all of these devices.

现在，在编写PreviewDevice的参数时，只需键入一个点，自动完成功能将建议所有这些设备。

After adding the constants for all of the devices, I thought it would be useful to create a preview for multiple devices with one modifier. As seen above, I extended View with a function called previewDevices(_:) that takes an array of PreviewDevices. The function puts the Views in a Group, so I don’t need to worry about accidentally creating multiple Views inside the previews’ static property. You might notice that I added a function called previewColorScheme(_:) that sets the color scheme to light or dark. This is possible using the .environment(\.colorScheme, .light) modifier, but I find this hard to remember and somewhat cumbersome to write.

在为所有设备添加常量之后，我认为使用一个修饰符为多个设备创建预览会很有用。 如上所示，我使用名为previewDevices(_:)的函数扩展了View ，该函数接受一个PreviewDevices数组。 该函数将Views放入一个Group ，因此我不必担心会在预览的static属性内意外创建多个Views 。 您可能会注意到，我添加了一个名为previewColorScheme(_:)的函数，该函数将配色方案设置为浅色或深色。 使用.environment(\.colorScheme, .light)修饰符是可能的，但是我发现这很难记住并且编写起来有些麻烦。

At this point, it is already a lot easier to create multiple previews with minimal code, but you might notice that my previewColorScheme(_:) modifier is now being applied to all four previews. This led me to think of a way to save everything I want for each preview and either set that configuration as a constant or save it to a file. In my example, I’ve done both, but it probably wouldn’t be necessary to do both. In the View extension, I now have a function called preview(_:, _:) that can either take a single instance of my Preview struct or an instance of my PreviewData struct that contains an array of Previews.

此时，用最少的代码创建多个预览已经很容易了，但是您可能会注意到，我的previewColorScheme(_:)修饰符现在已应用于所有四个预览。 这使我想到了一种保存每个预览所需的一切并将该配置设置为常量或将其保存到文件的方法。 在我的示例中，我同时完成了这两项工作，但可能没有必要同时进行这两项工作。 在View扩展中，我现在有一个称为preview(_:, _:)的函数，该函数可以采用我的Preview结构的单个实例，也可以采用包含一个Previews数组的PreviewData结构的实例。

Both of these structs conform to the Codable protocol, meaning they can easily be converted to and from JSON.

这两个结构都符合Codable协议，这意味着它们可以轻松地与JSON相互转换。

保存和加载预览配置所需的一切 (Everything You Need to Save and Load Preview Configurations)

Although this is all the code you need, moving the structs and extensions to separate files would make it cleaner.

尽管这就是您所需要的全部代码，但是将结构和扩展名移动到单独的文件中会使它更整洁。

When you have the code in your project, you’ll probably want to see the JSON that this code can create. Debug one of the previews by right- or control-clicking on the play button in the bottom right corner.

当您的项目中有代码时，您可能希望查看此代码可以创建的JSON。 通过右键单击或右击右下角的播放按钮来调试其中一个预览。

Right- or control-clicking the Live Preview button allows you to print to the console and even use breakpoints!

右键单击或按住Control键单击“实时预览”按钮，您可以打印到控制台甚至使用断点！

As I set the code up to print the JSON every time the previews are loaded, you should see the JSON for the PreviewData instance printed to the console. If you want to load this JSON from a file, copy the JSON from the console, create a new file of the type empty file in your Xcode project called previews.json, and paste it there. This should be all you need to do, as I already created a static constant called previewDataFromFile that looks for a file with this name. If you named your file differently, you’ll need to update previewDataFromFile accordingly.

当我将代码设置为每次加载预览时都打印JSON时，您应该看到PreviewData实例的JSON打印到控制台。 如果要从文件加载此JSON，请从控制台复制JSON，在您的Xcode项目中创建一个名为empty file的新文件，名为previews.json ，然后将其粘贴到其中。 这应该是您需要做的所有事情，因为我已经创建了一个名为previewDataFromFile的静态常量，该常量将查找具有该名称的文件。 如果您使用不同的名称命名文件，则需要相应地更新previewDataFromFile 。

If everything worked correctly, you should be able to change the modifier in ContentView_Previews from .preview(previewData) to .preview(previewDataFromFile). If the preview can be reloaded without failing, you’ve successfully loaded the file. There won’t be any change to what you see, as the file contains the same data as you were previewing previously. However, one drawback to the file-based approach is the lack of live updates. You may modify the JSON file, but your changes won’t be reflected in the preview until you make other changes to the SwiftUI code.

如果一切正常，则应该可以将ContentView_Previews的修饰符从.preview(previewData)更改为.preview(previewDataFromFile) 。 如果可以不失败地重新加载预览，则说明您已经成功加载了文件。 您所看到的内容将不会有任何变化，因为该文件包含的数据与您之前预览的相同。 但是，基于文件的方法的一个缺点是缺少实时更新。 您可以修改JSON文件，但是您所做的更改将不会反映在预览中，除非您对SwiftUI代码进行其他更改。

Think of the JSON file as a more permanent way to store your configurations.

将JSON文件视为存储配置的更永久的方法。

下一步 (Next Steps)

Although I haven’t covered it here, it would be possible to retrieve these JSON files from a URL response, should you want to share a configuration with others.

尽管这里没有介绍，但如果您想与其他人共享配置，则可以从URL响应中检索这些JSON文件。

It would be possible to parse the file as [PreviewData].self, meaning that you could have an array of configurations in a single file. This would require you also saving this array as an object, possibly even as a static constant of the PreviewDevice class. This would allow you to use a modifier like .preview(PreviewDevice.arrayFromFile[0]) to pass the first PreviewData in the array.

可以将文件解析为[PreviewData].self ，这意味着您可以在单个文件中包含一系列配置。 这将需要您将此数组另存为一个对象，甚至可能另存为PreviewDevice类的静态常量。 这将使您可以使用.preview(PreviewDevice.arrayFromFile[0])类的修饰符来传递数组中的第一个PreviewData 。

翻译自: https://medium.com/better-programming/how-to-create-reusable-swiftui-previews-that-can-be-saved-as-json-files-2ca7b42c9ac6

json格式文件预览