创建项目
创建项目.png
项目文件
项目文件.png
- AppDelegate.swift — 它负责App的启动与终止,并负责与
SceneDelegate
交接。 - SceneDelegate.swift — 它负责管理应用程序的生命周期。
- ContentView.swift — 最重要,在该文件中进行 UI 界面的编写。
- Assets.xcassets — 存放项目中使用的所有图像和颜色。
- LaunchScreen.storyboard — 应用加载时显示的屏幕。
- Info.plist — 属性列表文件,包含项目的很多配置,如App名字、版本等
- Preview Content — 这是一个文件夹,里面包含一个
Preview Assets.xcassets
启动流程
-
AppDelegate
中通过application(_:configurationForConnecting:options)
返回一个UISceneConfiguration
实例 - 完成启动后,控制权被交接给
SceneDelegate
,它的scene(_:willConnectTo:options:)
将会被调用,设置window
的根视图控制器 - 在初始化根视图控制器时会初始化
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
代码语言:javascript复制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()
}
}
}
}