swiftui_在生产中使用SwiftUI（第1部分）

swiftui

SwiftUI has been loved ❤️ by the iOS developers, for its simple and declarative syntax. Except that not many people use it in production 😞. The minimum iOS 13 requirement, and the potential disruptive syntax change in the near future, all scared developers away.

SwiftUI因其简单且声明性的语法而受到iOS开发人员的喜爱❤️。 除了很少有人在生产中使用它😞。 最低的iOS 13要求以及在不久的将来潜在的破坏性语法更改，所有这些都吓到了开发人员。

We all know the best way to learn, is to get your hands dirty; and I believe getting your hands dirty in the face of the market, is even better. So I took the challenge to build a heart rate monitor app with SwiftUI, and published it in the App Store. Hard things have been learnt, and I’ll share them in the series of articles.

我们都知道最好的学习方法是弄脏双手。 而且我相信面对市场变得肮脏甚至更好。 因此，我接受了使用SwiftUI构建心率监测器应用程序的挑战，并将其发布在App Store中。 艰难的事情已经学会了，我将在系列文章中分享它们。

This article (Part 1) focuses on the fun part: building the UI for the app.

本文(第1部分)重点介绍有趣的部分：构建应用程序的UI。

血液 (The Blood)

When blood flows from your heart to your finger, more light is absorbed by blood; when blood flows away from your finger, less light is absorbed. This enabled us to use iPhone camera to measure heart rates.

当血液从心脏流到手指时，血液会吸收更多的光； 当血液从手指流走时，吸收的光会更少。 这使我们能够使用iPhone相机测量心率。

A typical measurement process will experience these screens on UI:

典型的测量过程将在UI上遇到以下屏幕：

1. The app will start in a ready-to measure state.2. When user taps the Start button, the app turn on the flashlight, and wait for user to put their fingers on the camera.3. When the user’s finger is on the camera, the measuring process starts, and there’s a ring showing the progress and current measurement.4. After the measurement finishes, we present a UI to summarize the result.5. Some errors will be rendered differently.

1.该应用程序将以准备就绪的状态启动2。 当用户点击开始按钮时，应用程序会打开手电筒，并等待用户将手指放在相机上3。 当用户的手指放在相机上时，测量过程开始，并且会显示一个环，显示进度和当前测量结果。4。 测量完成后，我们提供一个UI来汇总结果。5。 一些错误将以不同的方式呈现。

美国 (The States)

The above-mentioned major screens are represented by a MeasurementState enum.

上述主要屏幕由MeasurementState枚举表示。

With the enum defined, the states used to render the UI are enclosed in a MeasurementService. This class will be coordinating camera readings, heart rate calculations, and update these published states; UI will rely on these states for rendering.

定义了枚举后，用于呈现UI的状态将包含在MeasurementService中。 该课程将协调相机读数，心率计算并更新这些发布的状态； UI将依靠这些状态进行渲染。

查看层次结构 (View Hierarchies)

We use a ZStack to render these screens. Why not using modals? Because it’s very hard to get fullscreen modals rendered in SwiftUI (pitfall #1), there’s nothing like UIModalPresentationStyle.fullScreen in SwiftUI, using a ZStack gives you full control over how you want to present and render screens. As you can see below, we use measurementService.state, to determine whether to display MeasurementView and SuccessView.

我们使用ZStack渲染这些屏幕。 为什么不使用模态？ 由于很难在SwiftUI中渲染全屏模式 (陷阱＃1) ，因此没有什么像SwiftUI中的UIModalPresentationStyle.fullScreen一样，使用ZStack可以完全控制您想要呈现和渲染屏幕的方式。 如下所示，我们使用measurementService.state来确定是否显示MeasurementView和SuccessView。

What is this NavigationConfigurator thing doing? Customizing navigation bar is already hard in UIKit (if you want translucency, getting rid of a default gradient or shadow or separator); customizing nav bar in SwiftUI is even harder (pitfall #2). The following code shows what’s inside NavigationConfigurator: it exposes a chance for the call site to configure the nav bar, through UIKit API.

NavigationConfigurator在做什么？ 在UIKit中自定义导航栏已经很困难了(如果您想要半透明，请摆脱默认的渐变，阴影或分隔符)； 在SwiftUI中自定义导航栏更加困难 (陷阱2)。 以下代码显示了NavigationConfigurator内部的内容：它为调用站点提供了通过UIKit API配置导航栏的机会。

有趣的部分：BpmView (The Fun Part: BpmView)

The most fun part in SwiftUI, is building cool UI and animations in no time. For example, the BpmView renders the current bpm reading, and has a smooth ring progress animation.

SwiftUI中最有趣的部分是立即构建出色的UI和动画。 例如，BpmView呈现当前的bpm读数，并具有平滑的铃声进度动画。

To build this UI, we place a RingView in the bottom of the ZStack, and place all other elements on the bottom, with the help of a VStack.

要构建此UI，我们在VStack的帮助下将RingView放在ZStack的底部，并将所有其他元素放在底部。

Note that you can’t have have more than 10 children in a SwiftUI VStack (pitfall #3), so be mindful of these small limitations here and there.

请注意， SwiftUI VStack中的子代最多不能超过10个 (陷阱3)，因此请注意此处和此处的这些小限制。

RingView consists of two RingShape, the second being overlaid on top of the first one.

RingView由两个RingShape组成，第二个被叠加在第一个上。

The RingShape is an animatable Shape struct.

RingShape是可动画制作的Shape结构。

Now we have all the components in place, let’s preview different variants of this BpmView. Not bad!

现在我们已经准备好所有组件，让我们预览此BpmView的不同变体。 不错！

第1部分摘要 (Part 1 Summary)

In this part, we went through how to create a SwiftUI app in production, which is multi-screen with animatable components. We also went through several tricky part in the current state of SwiftUI:

在这一部分中，我们介绍了如何在生产环境中创建SwiftUI应用程序，该应用程序是带有动画组件的多屏幕。 在SwiftUI的当前状态下，我们还经历了一些棘手的部分：

#1. Render fullscreen UI without modal presentation..#2. Customize nav bar by hooking into UIKit API.#3. Don’t put more than 10 children in VStack/HStack/ZStack.

＃1。 呈现不带模式呈现的全屏UI。＃2。 通过连接到UIKit API自定义导航栏。＃3。 在VStack / HStack / ZStack中不要放置超过10个孩子。

In the next part, I’ll talk about how to have MeasurementService connect with an Objc library, and actually take heart rate measurements, and feed the results onto the UI.

在下一部分中 ，我将讨论如何使MeasurementService与Objc库连接，以及如何进行心率测量并将结果反馈到UI上。

翻译自: https://medium.com/@chen_li/using-swiftui-in-production-part-1-26971ed9ef7

swiftui