swift和swiftui_SwiftUI提示和技巧

swift和swiftui

SwiftUI has changed the way we build user interfaces in our iOS applications. The declarative state-driven framework is concise and easy on the eyes primarily due to function builders that power the DSL language.

SwiftUI改变了我们在iOS应用程序中构建用户界面的方式。 声明性的状态驱动框架简洁明了，这主要归功于为DSL语言提供支持的功能构建器。

With the number of features that have already been presented since its debut, keeping track of some cool tricks can become a challenge. Thankfully, this article is just the cheat sheet you need for such cases.

自首次亮相以来就已经呈现出许多功能，要跟踪一些很酷的技巧可能会成为一个挑战。 幸运的是，本文只是您遇到这种情况所需的备忘单。

In the following sections, I’ve compiled a list of tips and tricks that should help you build SwiftUI applications easily. Let’s get started.

在以下各节中，我整理了一系列提示和技巧，这些提示和技巧可以帮助您轻松构建SwiftUI应用程序。 让我们开始吧。

当您使用不同的类型时，将视图包装在AnyView或组中 (Wrap Views in AnyView or Groups When You Have Different Types)

The some keyword was introduced in Swift 5.1 for defining opaque types. It allows the compiler to decide the concrete type of the function based on the returned value.

在Swift 5.1中引入了some关键字，用于定义不透明类型。 它允许编译器根据返回的值确定函数的具体类型。

While this is all good for single-branch code or when the view types are alike, it would lead to a compiler error when you have multiple-branch code with different views.

虽然这对于单分支代码或视图类型相同都很好，但是当您拥有具有不同视图的多分支代码时，这将导致编译器错误。

Specifically, the SwiftUI interface wouldn’t be able to determine a single opaque type. We can work around this by wrapping the set of views in a Group or AnyView.

具体来说，SwiftUI界面将无法确定单个不透明类型。 我们可以通过将视图集包装在Group或AnyView来解决此问题。

AnyView ensures that there’s a single opaque return type, but make sure you don’t use this too often.

AnyView确保只有一个不透明的返回类型，但是请确保您不要经常使用此类型。

The tip above is useful when using switch statements in the SwiftUI body as well. However, a better alternative in such scenarios would be to extract the switch statement in a separate function.

当在SwiftUI主体中使用switch语句时，上面的技巧也很有用。 但是，在这种情况下，更好的选择是在单独的函数中提取switch语句。

通过解耦独立的视图来防止状态变化时整个SwiftUI主体的重新加载 (Prevent the Reload of Whole SwiftUI Body on State Changes by Decoupling Independent Views)

Being a state-driven framework, whenever a state is changed, all the views in the SwiftUI body get refreshed — including the ones that weren’t bound to that state.

作为状态驱动的框架，每当状态更改时，SwiftUI主体中的所有视图都会刷新-包括未绑定到该状态的视图。

Sometimes, you might wish there was a way to avoid refreshing the whole body. Luckily, you can do this by separating the views that aren’t dependent on the state, as shown below:

有时，您可能希望有一种方法可以避免刷新整个身体。 幸运的是，您可以通过分离不依赖于状态的视图来做到这一点，如下所示：

In the code above, the RandomText no longer refreshes the text when the bottom sheet is presented or dismissed.

在上面的代码中，当显示或关闭底部工作表时， RandomText不再刷新文本。

使自定义视图的初始化代码块简短 (Keep the init Code Block for Custom Views Short)

It’s important to note that the constructor of custom views in a SwiftUI body is called every time the super view refreshes. However, this doesn’t imply the whole custom view gets reconstructed.

重要的是要注意，每次刷新超级视图时，都会调用SwiftUI主体中的自定义视图的构造函数。 但是，这并不意味着整个自定义视图都会重建。

For example, a custom SwiftUI camera view will invoke its init block every time but wouldn’t reconstruct the AVFoundation capture sessions every time (unless you’re passing a state property wrapper that triggers a change in it).

例如，自定义SwiftUI相机视图每次都会调用其init块，但不会每次都重新AVFoundation捕获会话(除非您传递触发其更改的state属性包装器)。

As such, ensuring that the init block isn’t too heavy is a good idea.

因此，确保init块不太重是一个好主意。

高效使用SwiftUI图像 (Use SwiftUI Images Efficiently)

Alongside SwiftUI, iOS 13 introduced SF Symbols, which boasts a collection of images. We can customize them in our SwiftUI Images easily with modifiers like font that are applied in the same way as with SwiftUI Text.

除了SwiftUI，iOS 13还引入了SF Symbols，它具有一系列图像。 我们可以轻松地在SwiftUI图像中使用与font一样的修饰符来自定义它们，这些修饰符的使用方式与SwiftUI Text相同。

杠杆插值 (Leverage interpolation)

Often, you have image assets that require stretching the contents beyond their size. You could end up with blurry images, as the interpolation that works by default blends the pixels.

通常，您拥有的图像资产需要将内容拉伸到超出其大小。 您可能最终会得到模糊的图像，因为默认情况下有效的插值会混合像素。

By setting the interpolation modifier to none, you can ensure that blending doesn’t happen and the pixelated image is smooth.

通过将interpolation修改器设置为none ，可以确保不发生混合并且像素化的图像平滑。

在NavigationView中处理图像 (Dealing with images in NavigationView)

Another crucial scenario of SwiftUI Images is when they’re embedded in a NavigationLink. By default, the images would get masked with the tint color (which is blue when placed in a NavigationView). To avoid this overlay, we need to set .buttonStyle(PlainButtonStyle()) on the NavigationLink, as shown below:

SwiftUI图像的另一个关键场景是将它们嵌入到NavigationLink 。 默认情况下，图像将被着色颜色掩盖(放置在NavigationView时为蓝色)。 为了避免这种覆盖，我们需要在NavigationLink上设置.buttonStyle(PlainButtonStyle()) ，如下所示：

Here’s the output(s) with and without the PlainButtonStyle set on the NavigationLink:

这是在NavigationLink上设置和不设置PlainButtonStyle的输出：

处理多个预览 (Handling Multiple Previews)

We know that SwiftUI provides us with real-time previews, but what makes it even more interesting is the ability to show multiple previews — be it for dark mode or different device models.

我们知道SwiftUI为我们提供了实时预览，但是使它更加有趣的是能够显示多个预览-无论是在暗模式下还是在不同设备型号下都可以。

Here’s an example that shows the same SwiftUI view in a light and dark mode.

这是一个在明暗模式下显示相同SwiftUI视图的示例。

Dark mode in previews is half-working by default. Instead of setting the system background color like above, you can refer to this Stack Overflow post to use the view modifier extension as a fix.

默认情况下，预览中的黑暗模式将无法正常工作。 您可以参考此Stack Overflow帖子 ，而不是像上面那样设置系统背景色，以使用视图修改器扩展名作为修复程序。

We can also Group the Content Previews or use a ForEach loop that displays the UI in different devices, as shown below:

我们还可以对“内容预览”进行Group ，或使用一个ForEach循环在不同设备中显示UI，如下所示：

利用帧修改器填充视图 (Leverage Frame Modifier for Filling Views)

By default, views occupy minimal space on the screen. For instance, the following TextView wraps itself:

默认情况下，视图在屏幕上占据的空间很小。 例如，以下TextView自动包装：

To expand the views to fill the super view space, we can leverage the frame modifier and set the maxWidth and maxHeight properties in it to infinity, as shown below:

要扩展视图以填充超级视图空间，我们可以利用frame修饰符并将其中的maxWidth和maxHeight属性设置为infinity ，如下所示：

使用自定义修饰符和扩展 (Use Custom Modifiers and Extensions)

By using view extensions, we can extend built-in functionalities, thereby simplifying our code and improving readability. For instance, wrapping views in an AnyView or embedding them in a NavigationView is a fairly common exercise. We can create extensions for them like so:

通过使用视图扩展，我们可以扩展内置功能，从而简化我们的代码并提高可读性。 例如，将视图包装在AnyView或将其嵌入到NavigationView是相当常见的做法。 我们可以为他们创建扩展，如下所示：

Taking a cue from this, you can create an extension for a SwiftUI Image as well and set a default placeholder image.

以此为线索，您还可以为SwiftUI图像创建扩展，并设置默认的占位符图像。

SwiftUI provides us with a range of view modifiers that can be chained together as building blocks. But sometimes, you end up with the same set of modifiers — specifically when customizing views. This can create boilerplate code that could be avoided by using custom view modifiers.

SwiftUI为我们提供了一系列视图修改器，这些修改器可以作为构建块链接在一起。 但是有时，您最终会得到相同的修饰符集-特别是在自定义视图时。 这可以创建可通过使用自定义视图修饰符避免的样板代码。

The code below shows one such view modifier that creates a custom style:

下面的代码显示了一个这样的视图修饰符，它创建了一种自定义样式：

奖金提示 (Bonus Tip)

We explored a bunch of tips and tricks in SwiftUI, and I hope they help bolster your development even further.

我们探索了SwiftUI中的许多技巧和窍门，希望它们有助于进一步促进您的开发。

Often, an error while writing code in SwiftUI stops the preview and we need to press the “Resume” button again. As this happens a lot, you can use the Option + Cmd + P shortcut to quickly resume.

通常，在SwiftUI中编写代码时出错会导致预览停止，我们需要再次按下“恢复”按钮。 由于这种情况经常发生，因此您可以使用Option + Cmd + P快捷方式快速恢复。

That’s it for this one. Thanks for reading.

就这个。 谢谢阅读。

翻译自: https://medium.com/better-programming/swiftui-tips-and-tricks-c7840d8eb01b

swift和swiftui