SwiftUI入门

摘要

这篇分享的内容是关于SwiftUI的一些知识，主要分为以下几个方面：SwiftUI的概念和用法；WWDC 20大会上对swiftUI的更新介绍；SwiftUI在开发应用中的优缺点分析以及它和我们目前开发中使用的UIKit的比较；SwiftUI的发展前景等。

---

前景

从以下数据可以看出，未来swift将是iOS开发的唯一选择，越早进行相关的迁移工作会对未来公司的发展越有利：

• 从 WWDC17 后 苹果已经不再使用 Objective-C 做 Sample Code 演示
• https://developer.apple.com/不再更新Objective-C 相关的文档
• WidgetKit 是 SwiftUI only
• App Clips 10M的包大小， SwiftUI 是最合适的框架
• 开源社区逐步放弃 Objecive-C 如 Lottie

---

SwiftUI介绍

SwiftUI是Apple在WWDC19上提出来的一个基于Swift编程语言，Xcode编译器的声明式的布局引擎，具有良好的跨平台特性，可以为所有Apple平台上的应用编写界面，并且支持同步预览，可视化编辑等功能。

基础概念

swiftUI控件

Text：展示静态文本内容的控件

Image：展示图片的控件

HStack，VStack，Zstack：用来进行控件的不同排列，包括水平，垂直和subviews

struct ContentView: View {
    var body: some View {
        VStack {
            Image("chilkoottrail")
                .frame(width: 300, height: 300, alignment: .center)
                .clipShape(Circle())
                .overlay(
                    Circle().stroke(Color.white, lineWidth: 4))
                .shadow(radius: 10)
            Text("chilkoottrail")
                .font(.title)
        }
    }
}

List：list是swiftUI中的一个列表容器，实现的效果类似于UITableView，为我们提供一个可以滚动显示数据的表格。

NavigationView：为我们的界面顶部提供一个导航视图，被navigationView包裹起来的组件都会处于一个视图栈中，可以进行页面的push和pop切换，一般会有三个控件和navigationView结合使用：

• navigationLink：可以将一个新的视图推进视图栈中，跳转的目标界面需要用到navigationLink来设置。功能类似于pushViewController

  struct ContentView: View {
      var body: some View {
          NavigationView {
              NavigationLink(destination: Detail()) {
                  Text("haha")
              }
              .navigationBarTitle("ded", displayMode: .inline)
              .navigationBarItems(leading: Button("lead"){})
          }
      }
  }

  我们只需要给NavigationLink提供跳转的目标界面和需要点击的控件，其他的NavigationLink会自己完成，虽然Text是一个静态的文本控件，但是这里NavigationLink给他提供了点击的能力。

• navigationBarItems：用来设置导航栏的左右按钮
• navigationBarTitle&#x