SwiftUI

jiezi

5 年前

小贴士:
你可能会认为这一章完全可以跳过，但除非你是一个 Swift 的天才，否则你应该读到最后再确定。

自 Xcode 11 之后，基本的 Single View App 模板为您提供以下内容:

AppDelegate.swift 它负责监视外部事件，例如，如果另一个应用程序视图向您发送要打开的文件。
SceneDelegate.swift 它负责管理应用程序的显示方式，例如让多个实例同时运行，或者当一个实例移动到后台时采取措施。
ContentView.swift 这是我们的初始用户界面。如果这是一个 UIKit 项目，这将是 Xcode 提供给我们的 ViewController 类。
Assets.xcassets 这是一个资产目录，存储着我们项目中使用的所有图像和颜色。
LaunchScreen.storyboard 这是在您的应用加载时显示的屏幕。
Info.plist 是一个属性列表文件，在本例中，它用于存储应用程序的系统范围设置 – 例如，在 iOS 主屏幕的图标下面应该显示什么名称。
Preview content 一个名为“预览内容”的组，其中包含另一个名为“预览资产”的资产目录。

就是这样 – 这是一个令人愉快的少量代码和资源，这意味着我们可以在此基础上进行构建。

我们真正关心的是 ContentView.swift , 事实上，这是唯一重要的部分。这是我们应用程序的主要功能，在这里我们可以立即开始尝试各种 SwiftUI 代码。

首先，是什么让 ContentView.swift 显示在屏幕上？
好吧，如果你还记得我说过 SceneDelegate.swift 负责管理你的应用程序的显示方式。那么，继续打开 SceneDelegate.swift，您会看到下面的代码:

let window = UIWindow(windowScene: windowScene)
window.rootViewController = UIHostingController(rootView: ContentView())
self.window = window
window.makeKeyAndVisible()

这段代码创建了一个新的 ContentView 实例（这是我们即将看到的主要功能），并将其放在 window 中，以便在屏幕上显示。它通过显示 ContentView 的第一个实例，可以有效地引导我们的应用程序，并从那里结束 – 你想做什么？

打开 ContentView.swift，让我们看看实际的 SwiftUI 代码。您应该看到这样的代码:

import SwiftUI

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

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {ContentView()
    }
}
#endif

这不是很多代码，但它确实包含了大量代码。

首先，请注意，ContentView 是一个结构体（struct）。熟悉 UIKit 的开发人员知道，这是巨大的 – 我们从用户界面的所有值类型的不可变性和简单性中获益！哪些不熟悉 UIKit 的人。。。嗯，只是点头微笑 – 你永远不知道我们曾经的痛苦。

其次，ContentView 符合 View 协议。你想在 SwiftUI 中显示的所有内容都需要符合 View，这实际上只意味着一件事: 你需要一个名为 body 的属性来返回某种 View。

第三，body 的返回类型是 some View。some 关键字是在 Swift 5.1 中新增的，是一个名为不透明返回类型的功能的一部分，在这种情况下，它的意思是“将返回某种视图，但 SwiftUI 不需要知道（或关心）什么。”
重要说明: 返回 some View 意味着 body 属性将返回符合 View 协议的内容。你不能返回很多东西或忘记返回任何东西 — Swift 编译器将拒绝构建你的代码。要清楚，您的视图正文必须返回一个子视图。

第四，body 属性中有文本（“hello world”），它创建了文本“hello world”的标签。

最后，在 ContentView 下面的是一个类似但不同的 struct，称为 ContentView_Previews。它不符合 View 协议，因为它专门用于在 Xcode 中显示 视图预览（Preview），而不是在真实 app 中显示在屏幕上。这就是为什么你会看到它在 #if DEBUG 和 #endif 之间 – 当我们的应用程序在调试环境中运行时，这段代码只构建在 成品（finished product）中，因为它在 生产应用程序（Production app）中没有意义。

我们很快就会更详细地看一下这些组件（components），但首先让我们看一下 Text 组件。。。

1.1 基本模板介绍