SwiftUI：了解SwiftUI APP的基本结构

项目简介

在这个项目中，我们将构建一个可在餐厅用餐后使用的账单拆分应用程序-输入食品费用，选择要留下的小费以及多少人，它将告诉您每个人需要支付的费用。

这个项目的目的不是要构建任何复杂的项目，因为它的真正目的是通过有用的方式向您介绍SwiftUI的基础知识，同时还为您提供了一个现实世界的项目，您可以根据需要进一步扩展。

您将学习UI设计的基础知识，如何让用户输入值并从选项中进行选择以及如何跟踪程序状态。由于这是第一个项目，因此我们会顺其自然，缓慢并解释所有过程——后续项目将缓慢提高速度，但现在我们将其轻松进行。

与所有涉及构建完整应用程序的项目一样，该项目分为三个阶段：

• 1、对你将要学习的所有技术的介
• 2、有关构建项目的分步指南。
• 3、您需要自己完成挑战，才能进一步推进项目。

每一项都很重要，因此不要试图匆匆跳过。

在第一步中，我将单独教给您每个单独的新组件，以便您了解它们如何单独工作。将有很多代码，但也有一些解释，因此您可以看到一切如何单独工作。此步骤是一个概述：这是我们将要使用的东西，这是它们的工作方式，这是您如何使用它们。

在第二步中，我们将采用这些概念并将其应用于实际项目中。在这里，您将看到事物在实践中是如何工作的，但是您还将获得更多的背景信息——这就是我们要使用它们的原因，这是它们与其他组件配合的方式。

在最后一步，我们将总结您学到的知识，然后对您进行简短的测试，以确保您真正了解其中的内容。您还将面临三个挑战：完成自己需要完成的三个全新任务，以确保您能够运用所学的技能。我们不提供针对这些挑战的解决方案，因为它们是在那里对您进行测试，而不是给您提供解决方案。

无论如何，说的足够多了：现在是时候开始第一个项目了。我们将研究构建账单共享应用程序所需的技术，然后在实际项目中使用这些技术。

因此，现在启动Xcode，然后选择Create A New Xcode Project。您会看到一个选项列表，我希望您选择iOS和Single View App，然后按下一步。在随后的屏幕上，您需要执行以下操作：

• Product Name，请输入“ WeSplit”。
• Organization Identifier，您可以输入所需的任何内容，但是如果您有网站，则应输入与之相反的组件：“ hackingwithswift.com”将是“ com.hackingwithswift”。如果您没有域名，请补上一个域名——"me.yourlastname.yourfirstname''很好。
• Language，请确保已选择Swift。
• User Interface，请选择SwiftUI。
• 确保未选中底部的所有复选框。

如果您对组织标识符(organization identifier)感到好奇，则应查看下面的文本：“Bundle Identifier”。苹果需要确保所有应用程序都可以唯一标识，因此它将组织标识符——您的反向网站域名——与项目名称结合在一起。因此，Apple可能具有组织标识符“com.apple”，因此Apple的Keynote应用可能具有捆绑标识符“ com.apple.keynote”。

准备就绪后，单击“下一步”，然后选择保存项目的位置并单击“创建”。Xcode会考虑一两秒钟，然后创建您的项目并打开一些代码供您编辑。

稍后，我们将使用该项目来构建我们的账单拆分应用程序，但是现在，我们将其用作沙盒，可以在其中尝试一些代码。

Let’s get to it!

了解SwiftUI APP的基本结构

当您创建一个新的SwiftUI应用程序时，您将得到一些文件，总共可能有100行代码。大部分代码什么都不做，只是作为占位符给你一些东西来填充——你现在可以放心地忽略它，但是随着你学习这门课程的进展，它会发生变化。

在Xcode中，您应该可以在左侧的空间中看到以下文件，该空间称为项目导航器：

• AppDelegate.swift 包含用于管理应用程序的代码。以前在这里添加代码是很常见的，但现在这种情况非常少见。
• SceneDelegate.swift 包含在应用程序中启动一个窗口的代码。这在iPhone上没有多大作用，但在iPad上，这一点很重要，iPad用户可以同时打开你的应用程序的多个实例。
• ContentView.swift 包含程序的初始用户界面（UI），是我们在此项目中执行所有工作的地方。
• Assets.xclassets 是一个资源目录——一个您希望在您的应用程序中使用的图片集合。您还可以在这里添加颜色，以及应用程序图标、iMessage贴纸等。
• LaunchScreen.storyboard 是一个可视化编辑器，用于创建一小块UI，以便在应用程序启动时显示。
• info.plist 是一个特殊值的集合，它向系统描述你的应用程序是如何工作的——它是哪个版本，你支持哪个设备方向，等等。不是代码但仍然是很重要的东西。
• Preview Content 是一个黄色文件夹，其中包含Preview Assets.xcarets —— 这是另一个资源目录，特别是您在设计用户界面时要使用的图像，以便让您了解它们在程序运行时的外观。

我们为这个项目所做的所有工作都将在 ContentView.swift 中进行，Xcode已经为您打开了它。它的顶部有一些注释，这些注释在开头用两个斜杠标记，Swift会忽略它们，因此您可以使用它们来添加关于代码工作方式的解释。

下面是十行左右的代码：

import SwiftUI

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在我们开始编写自己的代码之前，有必要过一下所有的这些功能，因为有几个功能是新的。

• 首先，import SwiftUI告诉Swift我们希望使用SwiftUI框架提供的所有功能。苹果为我们提供了很多框架，比如机器学习、音频播放、图像处理等等，所以我们不想假设我们的程序想要使用所有的东西，而是说我们想使用哪些部分，以便加载它们。

• 其次，struct ContentView: View创建一个名为ContentView的新结构体，表示它遵循View协议。View来自SwiftUI，它是您想在屏幕上绘制的任何内容都必须采用的基本协议——所有文本、按钮、图像等都是视图，包括您自己的布局，可以组合其他视图。

• 第三，var body: some View定义了一个新的计算属性body，它有一个有趣的类型：some View。这意味着它将返回符合视图协议的内容，但额外的some关键字添加了一个重要限制：它必须始终是被返回的同一类型的视图——您不能有时返回一种类型的内容，有时又返回另一种不同类型的内容。
  我们稍后将讨论此功能，但现在请记住，它意味着“必须从此属性返回一种特定的视图”
  View协议只有一个要求，即您有一个名为body的计算属性，该属性返回some View。您可以（也将会）向视图结构中添加更多的属性和方法，但body是唯一一个必须要有的。

• 第四，Text（“Hello World”）使用字符串“Hello World”创建一个文本视图。文本视图是绘制到屏幕上的简单静态文本，并将根据需要自动换行。

在ContentView结构体下面，您将看到一个ContentView_Previews结构体，它遵循PreviewProvider协议。这段代码实际上不会构成最终应用程序的一部分，而是专门供Xcode使用，以便它可以在代码旁边显示UI设计的预览。

这些预览使用一个称为画布（canvas）的Xcode特性，它通常在代码的右侧直接可见。如果需要，您可以自定义预览代码，它们只会影响画布显示布局的方式——它不会更改实际运行的应用程序。

Xcode只能在macOS Catalina或更高版本上显示画布。如果看不到画布并且已经在运行Catalina，请转到 Editor 菜单并选择 Canvas。

如果没有Catalina，则需要在模拟器中运行代码以查看其外观。

提示：您经常会发现代码中的错误会阻止Xcode的画布更新——您会看到类似“Automatic preview updating paused（自动预览暂停更新）”的内容，并可以按 Resume 来修复它。因为你会经常这样做，让我推荐一个重要的快捷方式：Option+Cmd+P和单击Resume是一样的。

原文来自Hacking with iOS: SwiftUI Edition 的
WeSplit: Introduction
Understanding the basic structure of a SwiftUI app

Previous: Hacking with iOS: SwiftUI Edition	Next: 创建表单

赏我一个赞吧~~~