swiftui navigationview_SwiftUI开发iOS项目

最新推荐文章于 2024-03-14 12:39:44 发布

weixin_39811478

最新推荐文章于 2024-03-14 12:39:44 发布

阅读量160

点赞数 1

文章标签： swiftui navigationview 纯代码ios计算器

创建项目

项目文件

文件解读

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的根视图控制器。
在第 2 步的方法中初始化ContentView结构体，初始化其中的View，界面内容设置并显示出来。

ContentView如何显示在屏幕上?

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

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, 
options connectionOptions: UIScene.ConnectionOptions) {
// 创建SwiftUI的内容
let contentView = ContentView()

if let windowScene = scene as? UIWindowScene {
// 创建window
let window = UIWindow(windowScene: windowScene)
// 设置window的rootViewController
        window.rootViewController = UIHostingController(rootView: contentView)
// 显示
self.window = window
        window.makeKeyAndVisible()
}
}

初始化了ContentView，创建 UI 界面。
创建window，设置window的rootViewController，ContentView将UI 界面设置成rootViewController的内容，界面就可以显示出来。(这段代码大家应该很熟悉，因为在基于 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()
}
}

代码解读

以前我们在 ViewController使用代码或者利用 StoryBoard、XIB来完成的布局界面的事情，现在只需要一个继承自 View的界面描述结构体ContentView就可以搞定。
在ContentView内部，有一个 body，类型为 some View，这是 Swift 5.1 中新增的 Opaque return types(不透明的返回类型)，意思是每次 body 得到的一定是某个确定的、遵守 View 协议的类型，但不用知道具体是什么类型的 View。
注意： body不能返回很多 View或不返回任何 View，因为此时 Swift 编译器都会报错，所以务必记住 body必须始终返回一个 View。
在 body中的 Text("Hello SwiftUI")，表示创建了文本Hello SwiftUI的标签。
最后的结构体 ContentView_Previews，与ContentView类似，它专门用于在Xcode 中显示界面的预览。

Previews

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

支持多设备预览，可以按住option+previewDevice查看设备的名字

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

ContentView()
.previewDevice("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()
}
}
}
}

Canvas预览

SwiftUI 一个巨大的优势是可以直接预览代码的 UI 效果而不需要运行到模拟器(运行到模拟器也可以)，这大大节约了UI调试的时间。

开启预览

预览界面

预览效果

交互与Debug
点击下图中的按钮可以进行界面UI的交互，右击该按钮，可以选择Debug Preview，就可以进行Debug调试。

备注：后续文章首发于微信公众号，除了 Swift、SwiftUI、Combine、iOS开发等实用技术，也会分享一些学习心得，欢迎大家关注。

我的公众号