A lot of articles about SwiftUI development explore animation, transformations, and more, but very few seem to cover what to do when you need a new view. With UIKit, we had those faithful segues and a host of friendly methods to go with them, like prepareForSegue, unwindToThisViewController, etc.

关于SwiftUI开发的许多文章都探讨了动画，变换等内容，但是似乎很少涉及需要新视图时的操作。 有了UIKit，我们有了那些忠实的话题和许多友好的方法，例如prepareForSegue ， unwindToThisViewController等。

But that was then, and this is now.

但是那是那时，现在。

I want to focus on this article on what is both technically feasible and commercially acceptable. You can surely appreciate that these two states sometimes don’t meet in the middle.

我想将重点放在技术上可行和商业上可接受的内容上。 您肯定可以理解，有时这两个状态在中间不会相遇。

SwiftUI has rewritten the rule book on segues. Let’s take a tour of some of the options as they stand today in Swift 1.0.

SwiftUI已重写有关规则的规则书。 让我们浏览一下当今在Swift 1.0中存在的一些选项。

选项1 (Option 1)

This is the classic if clause changing an @State variable. You’ve surely used this already. SwiftUI reloads its UI when a declared state variable changes. You can use the classic if statement to control windows with it — an easy win here:

这是经典的if子句，用于更改@State变量。 您肯定已经使用过此功能。 当声明的状态变量更改时，SwiftUI会重新加载其UI。 您可以使用经典的if语句来控制窗口-在这里轻松获胜：

In fact, it’s the basis on which any/all segues now work in SwiftUI, with state changes. But changing state variables are local to the current struct they exist within. State variables are akin to private local variables.

实际上，这是状态更改后，任何/所有序列现在都可以在SwiftUI中工作的基础。 但是改变状态变量对于它们所存在的当前结构是局部的。 状态变量类似于局部私有变量。

You can reference them with Binding elsewhere, but this is a great example of the difference between technically feasible and commercially acceptable. Try referencing half a dozen variables with Bindings and your code will quickly become unreadable. Fortunately, there are quite a few alternative means to access the SwiftUI @State both locally and remotely. Read on.

您可以在其他地方使用Binding来引用它们，但这是技术上可行与商业上可接受之间差异的一个很好的例子。 尝试使用Bindings引用六个变量，您的代码将很快变得不可读。 幸运的是，有很多替代方法可以在本地和远程访问SwiftUI @State 。 继续阅读。

选项2 (Option 2)

A more extendable approach is to use the .id view modifier. When you change the ID of a view in SwiftUI, it’s akin to using setNeedsDisplay in UIKit. It forces the view to reload itself. Add some sneaky code in there to change the page while it’s not looking, and you’ve got an external source to give you more options:

一种更可扩展的方法是使用.id视图修饰符。 当您在SwiftUI中更改视图的ID时，类似于在UIKit中使用setNeedsDisplay 。 它强制视图重新加载。 在其中添加一些隐藏代码，以在页面不显示时更改页面，并且您有一个外部资源可以为您提供更多选择：

We used a Bool here, but there’s nothing to stop you from using an integer and linking in even more views. But wait, we’re changing the state here on the side and without SwiftUI’s cooperation. Technically, we’re on shaky ground since we are changing state variables in runtime outside the bounds of SwiftUI checks and balances. I feel I should warn you, as the compiler might: This could cause a runtime crash. Ironically, it just might pass commercially muster (even if it shouldn’t technically). But it may also blow up in your face.

我们在这里使用了Bool，但是没有什么可以阻止您使用整数并链接更多视图。 但是，等等，我们正在侧面改变状态，并且没有SwiftUI的合作。 从技术上讲，我们处于不稳定状态，因为我们正在运行时中更改状态变量，而不是SwiftUI检查和平衡的范围。 我觉得应该警告您，因为编译器可能会：这可能会导致运行时崩溃。 具有讽刺意味的是，它可能只是通过了商业上的要求(即使在技术上不应该如此)。 但它也可能在您的脸上炸毁。

No, this is probably not the best way forward.

不，这可能不是最好的方法。

选项3 (Option 3)

An option that is both technically and commercially good is to use observed and published objects in SwiftUI. First, we need to define a model, create a singleton view to it, and publish its state:

在技​​术上和商业上都很好的一个选择是在SwiftUI中使用观察和发布的对象。 首先，我们需要定义一个模型，为其创建一个单例视图，并发布其状态：

And then we can reference our new published model with some observed variables to monitor their changes and react as needed:

然后，我们可以使用一些观察到的变量引用我们新发布的模型，以监视它们的变化并根据需要做出React：

Note: I purposely flipped the page from the core view and then one of its children to show its flexibility. I didn’t need the ObservedObject in the Page2View. In truth, it shouldn’t be there. Using this method, we can switch to any page from any view, assuming we’re watching the correct model. It is super scalable.

注意：我故意从核心视图中翻转页面，然后翻转其子视图之一以显示其灵活性。 我在Page2View不需要ObservedObject 。 实际上，它不应该在那里。 使用此方法，假设我们正在观看正确的模型，则可以从任何视图切换到任何页面。 它具有超级可扩展性。

选项4 (Option 4)

OK. Just one more to go. Environmental variables are intended as a means to share data across the entire application. But if the first two methods are red traffic lights and the third is green, this feels like an orange. It’s orange because environmental variables are in essence global variables. Global variables are not liked in the world of software engineering. They are most certainly considered the big bad wolf and the source of all evil, so we may be on shaky ground commercially this time.

好。 还有一个。 环境变量旨在作为在整个应用程序中共享数据的一种方式。 但是，如果前两种方法是红绿灯，第三种是绿色，则感觉就像是橙色。 它是橙色的，因为环境变量本质上是全局变量。 全局变量在软件工程领域并不受欢迎。 他们无疑被认为是大灰太狼和万恶之源，所以这次我们可能在商业上处于摇摇欲坠的状态。

But hey, let’s look anyway. To start, we define a class again to keep all our environmental variables in check. This looks much like the last one — perhaps a tad less secure since it isn’t going to be a singleton. It can’t be a singleton this time.

但是，嘿，还是让我们看看。 首先，我们再次定义一个类以检查所有环境变量。 这看起来很像最后一个-可能不太安全，因为它不会成为单例。 这次不能是单身人士。

Next, we need to reference this in our SceneDelegate (this is Swift 1.0). The added/changed lines look like this. The lines in bold are already there. I added them to help you find the right place to add the code. Note that we simply commented out two of them here:

接下来，我们需要在SceneDelegate (这是Swift 1.0)中引用它。 添加/更改的行如下所示。 粗线已经存在。 我添加了它们，以帮助您找到添加代码的正确位置。 请注意，我们只是在此处将其中两个注释掉了：

var window: UIWindow?var views = SwiftUIViewDModel()...//    let contentView = ContentView()...//        window.rootViewController = UIHostingController(rootView: contentView)window.rootViewController = UIHostingController(rootView: ContentView().environmentObject(views))

Next, you use it in your SwiftUI file again, much like the previous example:

接下来，再次在SwiftUI文件中使用它，就像前面的示例一样：

Which method or methods you choose will depend on your application. There is nothing to stop you from mixing and matching them.

选择哪种方法取决于您的应用程序。 没有什么可以阻止您混合和匹配它们。

多个视图并发 (Multiple Views and More Concurrently)

We’re not quite finished yet. You see, there is a requirement here that we haven’t touched on yet — a requirement that is nevertheless very real: the need to change more than one view at the same time. Indeed, the need to kick other processes off when you change views. Yes, you can include all your views that need to be shown into the same view, but we’ll hit the scalability fence pretty quickly with that approach.

我们还没有完成。 您会看到，这里有一个我们尚未涉及的需求-仍然非常真实的需求：需要同时更改多个视图。 确实，当您更改视图时需要启动其他流程。 是的，您可以将所有需要显示的视图都包含在同一个视图中，但是我们将通过这种方法很快达到可扩展性的要求。

Obviously, you can extend any of the methods I just covered. Both the SwiftUI observed and environmental objects feel like the most scalable to me, so I’ll focus on them for now. Let’s work through an example with the observed object and add a second view to our Page 1/Page 2 views — a shadow view that will change when we change the first:

显然，您可以扩展我刚刚介绍的任何方法。 SwiftUI观察到的对象和环境对象对我来说都感觉是最可扩展的，因此我现在将重点介绍它们。 让我们通过观察对象的示例进行工作，然后向页面1 /页面2视图中添加第二个视图—阴影视图，当我们更改第一个视图时，该视图将改变：

The simplest solution to doing this would be to add a second state variable or observed object or environmental variable and simply change it at the same time. It’ll work, but is it the optimal solution? Is it the most scalable or can we do it differently? Let’s use this as a precursor to looking at something else.

这样做的最简单解决方案是添加第二个状态变量或观察到的对象或环境变量，然后简单地同时对其进行更改。 它会起作用，但这是最佳解决方案吗？ 它是最具扩展性的，还是我们可以做不同的事情？ 让我们将其用作查看其他内容的前提。

Along with SwiftUI, Apple announced a peer framework at WWDC2019 called Combine. It is a framework that brings Swift up close with a paradigm called functional reactive programming (or simply FRP). Combine works with two players: a publisher and a consumer. Their implementations are closely linked to the job you need to be done. Let’s use it to solve our problem of synchronizing views without having to do so quite as blatantly in the headline code.

苹果与SwiftUI一起在WWDC2019上宣布了一个名为Combine的同级框架。 它是一个框架，通过一种称为函数式React性编程(或简称为FRP)的范例使Swift更加紧密。 结合两个参与者的作品：发行者和消费者。 它们的实现与您需要完成的工作紧密相关。 让我们用它来解决同步视图的问题，而不必在标题代码中如此公然地进行。

Let’s start with subscriptions. The idea is to create a subscription for our shadow view that will load in parallel to our first. It is a great solution because you can implement it in the background. Let’s use it with our model based on ObservedObjects. Most of the changes are to the model class within which I declare the interested parties. You can see here that I have declared a second model and a method to map it to the first. I implemented some code to set up the subscription to bring it all together:

让我们从订阅开始。 这个想法是为我们的影子视图创建一个订阅，该订阅将与我们的第一个并行加载。 这是一个很好的解决方案，因为您可以在后台实现它。 让我们将其与基于ObservedObjects的模型一起使用。 大多数更改都针对我声明感兴趣方的模型类。 您可以在此处看到我已经声明了第二个模型以及将其映射到第一个模型的方法。 我实现了一些代码来设置订阅，以将它们整合在一起：

The idea is simple: When you change the first page to the second, the subscription will trigger the shadow to follow suit. Obviously, we need to add a little more to the SwiftView code to make this work. It now looks like this:

这个想法很简单：当您将第一页更改为第二页时，订阅将触发阴影以跟随。 显然，我们需要在SwiftView代码中添加一些内容才能SwiftView这项工作。 现在看起来像这样：

This works well but is also a great example of one of those tutorials that fall short in the real world. You see, this will do the change instantly. It’s great should the brief call to snap from one view to another. But briefs rarely if ever do that. They normally call for for your view to do a merry dance around the screen before transforming into the next screen so subtly the users hardly notice the change.

这很好用，但也是现实世界中其中一个教程不足的一个很好的例子。 您会看到，这将立即进行更改。 简短的调用可以从一个视图切换到另一个视图，这很好。 但是内裤很少这样做。 他们通常会要求您的视图在进入下一屏之前先在屏幕上进行快乐的跳舞，因此，用户几乎不会注意到更改。

Ironically, we’re back to those animation and transformation articles I alluded to at the beginning. Let’s start by looking at a shortcoming of the subscription we set up by adding a transition to the Page1/Page2 flip:

具有讽刺意味的是，我们回到了我最初提到的动画和变换文章。 让我们先来看一下我们在向Page1 / Page2翻转添加过渡时设置的订阅的缺点：

.onTapGesture {  withAnimation(.linear(duration: 4)) {    self.model.state = .page1  }}.transition(AnyTransition.opacity)

I’ll show you the problem. As you change the Page1 to Page2, it fades out as intended, but the shadow just flips because it is being trigged by the subscription:

我会告诉你问题所在。 当您将Page1更改为Page2时，它会按预期淡出，但是阴影会翻转，因为订阅正在触发它：

How do we fix this problem? A quick fix would be to add the state change for the shadow animation in the body of the code — the rationale for having a subscription in the first place.

我们如何解决这个问题？ 一种快速的解决方案是在代码正文中添加阴影动画的状态更改-首先进行订阅的理由。

What we need to do here is introduce more states to make this work. We need an entry state and an exit state for every view. We can then implement our code to transform between views within the views. The model code looks like this:

我们在这里需要做的是介绍更多的州来使这项工作。 每个视图都需要一个进入状态和一个退出状态。 然后，我们可以实现代码以在视图内的视图之间进行转换。 模型代码如下所示：

With the main SwiftUIView code now looking like this:

现在， SwiftUIView的主要代码如下所示：

If you’ve been following along, you’ll appreciate that this isn’t a small jump. The jury is out as to whether this is a commercially acceptable solution. Sure, it is super scalable, but it is a great deal of code for such a small detail. Maybe this isn’t the best solution for concurrently displaying views.

如果您一直在关注，那您将不胜感激。 关于这是否是商业上可接受的解决方案，尚无定论。 当然，它具有超级可伸缩性，但是对于这么小的细节，它是大量的代码。 也许这不是同时显示视图的最佳解决方案。

Can we do better? Within the Combine framework, there is another version of the publisher and consumer. It isn’t a subscription but will work the same sort of way. Let’s look at that. First, here is the model file. As you see, without the subscription code, it is far shorter. We have in it just two states again:

我们可以做得更好吗？ 在Combine框架内，还有发布者和使用者的另一个版本。 它不是订阅，但将以相同的方式工作。 让我们看看。 首先，这是模型文件。 如您所见，没有订阅代码，它要短得多。 我们又只有两个州：

And this is the main SwiftUI code using the alternative publisher/consumer mechanism:

这是使用替代发布者/消费者机制的主要SwiftUI代码：

It is considerably fewer lines (less than half the code with the subscription/fix for the animation). Clearly, this is a better solution in some ways.

它的行数大大减少(少于带有动画的订阅/修复的代码的一半)。 显然，在某些方面这是一个更好的解决方案。

结论 (Conclusion)

This brings us to the end of the article. I hope you learned something while reading it. I certainly did by writing it.

这使我们到了本文的结尾。 希望您在阅读时学到一些东西。 我当然是通过编写它来完成的。

Keep calm, keep coding.

保持冷静，保持编码。