SwiftUI Example

285 阅读3分钟

1.1 基本模板介绍

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

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

  1. AppDelegate.swift 它负责监视外部事件,例如,如果另一个应用程序视图向您发送要打开的文件。
  2. SceneDelegate.swift 它负责管理应用程序的显示方式,例如让多个实例同时运行,或者当一个实例移动到后台时采取措施。
  3. ContentView.swift 这是我们的初始用户界面。如果这是一个 UIKit 项目,这将是 Xcode 提供给我们的 ViewController 类。
  4. Assets.xcassets 这是一个资产目录,存储着我们项目中使用的所有图像和颜色。
  5. LaunchScreen.storyboard 这是在您的应用加载时显示的屏幕。
  6. Info.plist 是一个属性列表文件,在本例中,它用于存储应用程序的系统范围设置 - 例如,在 iOS 主屏幕的图标下面应该显示什么名称。
  7. 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 Viewsome 关键字是在 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 组件。。。