SwiftUI-开发iOS项目

·  阅读 349

创建项目

创建项目.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()
复制代码
  • 在设置windowrootViewController时,初始化了ContentView,UI 界面就可以显示出来
  • 这段代码应该很熟悉,在UIKit纯代码构建 iOS 程序中,会经常在 AppDelegate中写上类似的代码,不同的就是rootViewControllerUIHostingController类型的,UIHostingControllerUIViewController的子类,主要负责接受一个SwiftUIView的描述并将其用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 使用代码或者利用 StoryBoardXIB来完成的布局界面的事情,现在一个继承自 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视频教程,欢迎各位批评指教。

分类:
iOS
标签:
分类:
iOS
标签:
收藏成功!
已添加到「」, 点击更改