初识 SwiftUI

什么是SwiftUI？

2019年 WWDC 大会上，苹果宣布了基于Swift语言构建的全新UI框架-SwiftUI。其界面布局完全抛弃了Storyboard和Autolayout，采用了声明式的界面语言(DSL，即Domain Specific Language)，加上 Canvas 的实时预览功能，开发体验有了很大的提升。

自 iOS SDK 2.0 开始，UIKIt已经伴随开发者近十年，其思想继承了成熟的 AppKit 和 MVC，为iOS开发提高了良好的学习曲线。UIKit提供的是一套符合直觉的、命令式的编程方式，但是由于UIKit的基本思想要求 View Controller 承担绝大部分职责，它需要协调 model，view 以及用户交互，使得在较大型的项目里 View Controller 很臃肿，如果状态管理复杂甚至导致后期代码无法维护。近年来随着编程思想、技术的进步，越来越多的开始使用声明式或函数式的方式来进行界面开发，现在大热的 React 和 Flutter 便是采取了声明式编程。

在这种情况下，今年发布的SwiftUI当然也采取了声明式编程。

什么是声明式编程

维基百科对命令式、声明式编程的描述如下：

声明式编程：是一种不使用控制流来表示计算逻辑的编程范式。

命令式编程：是一种通过语句来改变程序状态的编程范式。

举个栗子，当我们要设置一个Text的时候，命令式编程如下

 override func viewDidLoad() {
        super.viewDidLoad()
        let label = UILabel(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        label.text = "世界和平"
        label.textColor = .purple
        view.addSubview(label)
    }

使用SwiftUI声明式编程时，则：

 var body: some View {
     Text("世界和平")
    		.color(.purple) 
    }

从上面可以看出，UIKit命令式编程是通过一句句的代码来指导“要怎么构建UI”，而声明式编程则是使用各自的DSL来描述“UI应该是什么样子”

SwiftUI是怎么进行布局

在SwiftUI里上面Text的声明只是纯数据结构的描述，并不是实际显示出来的视图，SwiftUI 会直接读取 DSL 内部描述信息并收集起来，然后转换成基本的图形单元，最终交给底层 Metal 或 OpenGL 渲染出来。

在 SwiftUI 中Text属性的设置在内部都会用一个虚拟的 View 来承载，然后在开始布局的时候再进行布局计算，这样做的目的主要是方便底层在设计渲染函数时更容易做到 monomorphic call，省去无用的分支判断，提高效率。

官方教程小解

swiftUI控件

备注：要使用 SwiftUI 的完整功能，需使用 Xcode 11, 并且将 macOS 系统升级到最新的10.15

这次SwiftUI的官方教程可以说苹果很给力，每一步代码都有讲解说明及效果图片，强烈推荐跟着教程敲一遍！这里简单说明一下教程中的一些细节

APP 的启动

在示例中，app在AppDelegate中通过application(_:configurationForConnecting:options)返回一个UISceneConfiguration实例：

func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
    }

这部分内容是 iOS 13 中新加入的通过 Scene 管理 app 生命周期的方式，以及多窗口支持部分所需要的代码。在 app 完成启动后，控制权被交接给 SceneDelegate，它的 scene(_:willConnectTo:options:)将会被调用，进行 UI 的配置：

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        let window = UIWindow(frame: UIScreen.main.bounds)
        window.rootViewController = UIHostingController(rootView: ContentView())
        self.window = window
        window.makeKeyAndVisible()
    }

这段代码则跟之前iOS app启动很类似，唯一不同的就是rootViewController为UIHostingController类型的，UIHostingController是UIViewController的子类，主要负责接受一个SwiftUI的View的描述并将其用UIKit进行渲染，由于这种继承关系，所以可以做到将SwiftUI构建的界面可以集成到已有的UIKit app中，不需要从头开始就是基于SwiftUI的构建

some View

struct ContentView: View {
    var body: some View {
        Text("世界和平")
            .color(.purple)
    }
}

从SceneDelegate进入到ContentView，会发现一个奇怪的some view，要解释这个我们就需要先了解下View。

View是SwiftUI的最核心的一个协议，代表了一个屏幕上元素的描述。这个协议中含有一个 associatedtype：

public protocol View : _View {

    associatedtype Body : View

    var body: Self.Body { get }
}

这种带有associatedtype的协议不能作为类型来使用，而只能作为类型约束使用，即不能写成var body: View否则会报Error，提示“Protocol 'View' can only be used as a generic constraint”。

其实如果我们指明 Body 的类型，也是可以的，例如

struct ContentView: View {
    var body: Text {
        Text("世界和平")
            .color(.purple)
    }
}

但是有个问题就是如果每次修改Body的返回时，我们都需要收到调整相应的类型，会很麻烦也无必要。 some View 这种写法使用了 Swift 5.1 的 Opaque return types 特性。它向编译器作出保证，每次 body 得到的一定是某一个确定的，遵守 View 协议的类型，但是请编译器“网开一面”，不要再细究具体的类型。这一个编译期间的特性，在保证associatedtype protocol的功能的前提下，使用 some 可以抹消具体的类型。这个特性用在 SwiftUI 上简化了书写难度，让不同 View 声明的语法上更加统一。

Modifier

VStack(alignment: .leading) {
    Text("世界和平")
        .font(.title)
}

除了View 之外，Modifier是 SwiftUI 另一个重要概念。在上面的代码中， .font(...)和 .foregroundColor(...)都修饰了 Text() 视图的某些属性——字体和颜色。每一个单独的 Modifier 并不会对 View 类型实例进行操作，而是一个返回 some View类型的闭包。因此 Modifier 的运行机制与我们熟悉的 UIKit 中对视图属性进行修改的方式是相反的，我们构建出一个视图时并不会先初始化出一个 View 实例再对其进行修饰，而是通过声明的各种Modifier 构建出View 实例。

当容器内视图具有相同的属性，可以将其提取到容器外进行定义，从而减少大量的重复代码：

HStack(alignment: .top) {
    Text("世界和平")
        .font(.subheadline)
    Spacer()
    Text("地球无战事")
        .font(.subheadline)
    
}
.foregroundColor(.yellow)

数据绑定

SwiftUI中一个很便捷的功能是视图与数据的绑定。在官方示例中，Toggle控件就绑定了showFavoritesOnly，而且绑定数据的方式非常的优雅，在初始化方法中通过 $ 声明某个属性便可以让视图自动绑定此变量

注：State是一个值或一组值，可以随时间发生变化并影响视图的行为、内容或布局。 👇使用具有 @State 声明的属性将状态添加到视图。


@State var showFavoritesOnly = true

var body: some View {
    
    Toggle(isOn: $showFavoritesOnly){
        Text("Favorites only")
    }
}

ForEach

ForEach 能以与 List相同的方式对集合进行，也就是说可以在任何使用子视图的地方使用它，例如堆栈、列表、groups中，当数据元素为简单的值类型，可以直接将\.self当做标识符的关键路径

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone SE", "iPhone XS Max"].identified(by: \.self)) { deviceName in
            LandmarkList()
                .previewDevice(PreviewDevice(rawValue: deviceName))
        }
    }
}

Canvas使用

Canvas 具有实时预览功能，在 Xcode 中显示的快捷键 CMD + OPTION + ENTER，取消显示快捷键CMD + ENTER
在 Xcode 中可以通过 Editor → Previews → Show View Bounds展示视图边界，方便 UI 校对
点击Canvas左下角的针头可以固定当前的Canvas，以便点击其他SwiftUI界面时候不会随之变动Canvas
选择LivePreview，可以使静态画布变成实时的，我们可以直接在Canvas上进行手势操作、触发事件查看效果

总结

今年WWDC发布的SwiftUI，是一个令iOS开发者兴奋的全新UI框架。虽然现在还有些遗憾，如仅支持iOS13及以上且其跨平台目前也仅仅只停留在苹果内部的生态圈里，但是由于Swift是开源的且Swift5的ABI也已经稳定下来，当2 - 3年后我们可以大面积使用它的时候，SwiftUI应该会有很不错的反响。

参考资料