创建项目

创建项目.png

项目文件

项目文件.png

• AppDelegate.swift — 它负责App的启动与终止，并负责与SceneDelegate交接。
• SceneDelegate.swift — 它负责管理应用程序的生命周期。
• ContentView.swift — 最重要，在该文件中进行 UI 界面的编写。
• Assets.xcassets — 存放项目中使用的所有图像和颜色。
• LaunchScreen.storyboard — 应用加载时显示的屏幕。
• Info.plist — 属性列表文件，包含项目的很多配置，如App名字、版本等
• Preview Content — 这是一个文件夹，里面包含一个 Preview Assets.xcassets

启动流程

1. AppDelegate中通过application(_:configurationForConnecting:options)返回一个UISceneConfiguration实例
2. 完成启动后，控制权被交接给 SceneDelegate，它的 scene(_:willConnectTo:options:)将会被调用，设置window的根视图控制器
3. 在初始化根视图控制器时会初始化ContentView中的View，显示出来

ContentView如何显示在屏幕上?

在SceneDelegate.swift中会看到这样的代码：

//创建window
let window = UIWindow(windowScene: windowScene)
//设置window的rootViewController 
window.rootViewController = UIHostingController(rootView: ContentView())
self.window = window
window.makeKeyAndVisible()

• 在设置window的rootViewController时，初始化了ContentView，UI 界面就可以显示出来
• 这段代码应该很熟悉，在UIKit纯代码构建 iOS 程序中，会经常在 AppDelegate中写上类似的代码，不同的就是rootViewController为UIHostingController类型的，UIHostingController是UIViewController的子类，主要负责接受一个SwiftUI的View的描述并将其用UIKit进行渲染

ContentView.swift

import SwiftUI

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

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

• 界面描述ContentView，以前我们在 ViewController 使用代码或者利用 StoryBoard、XIB来完成的布局界面的事情，现在一个继承自 View 的结构体搞定
• 在ContentView内部，有一个 body ，返回一个 Swift5.1 中新增的不透明的返回类型，意思就是返回某种 View，但是 body 不需要关心具体的内容
• 注意： body 不能返回很多 View 或不返回任何 View ，此时Swift编译器都会报错，所以务必记住 body 必须始终返回一个 View
• 在 body 中的 Text("Hello SwiftUI")，表示创建了文本Hello SwiftUI的标签
• 最后的结构体 ContentView_Previews，与ContentView类似，它专门用于在Xcode中显示视图预览。

Previews

Xcode 11 + macOS 10.15 可以实时预览 SwiftUI 实现的界面，这个预览可以帮助我们快速查看代码对应的效果而不需要运行。

• 支持多设备预览

struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
      Group {
         ContentView()
            // 预览设备
            .previewDevice(PreviewDevice(rawValue: "iPhone 11"))
            // 预览设备名称
            .previewDisplayName("iPhone 11")

         ContentView()
            .previewDevice(PreviewDevice(rawValue: "iPhone 11 Pro Max"))
            .previewDisplayName("iPhone 11 Pro Max")
      }
   }
}

• 支持多模式预览

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            // 超大文本
            ContentView()
                .environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)
            // 深色模式  
            ContentView()
                .environment(\.colorScheme, .dark)
            // 导航视图      
            NavigationView {
                ContentView()
            }
        }
    }
}

SwiftUI 视频教程

SwiftUI视频教程本人录制了一套SwiftUI视频教程,欢迎各位批评指教。