SwiftUI-开发iOS项目

YungFan

发布于 2019-10-25 15:45:25

4.7K0

发布于 2019-10-25 15:45:25

文章被收录于专栏：学海无涯

创建项目

创建项目.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

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()
            }
        }
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.10.24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

swift