SwiftUI - 前导篇

前言

在学习了前端js及跨平台语言开发Flutter之后，发现学习SwiftUI很简单，布局方式很容易里理解，代码也很容易上手，在Swift语言的基础上，可以理解为 SwiftUI 就是⼀种描述式的构建 UI 的⽅式。代码简洁，编码容易上手，未来前途无量，xdm学起来！！！
本篇文章稍显枯燥，如果没时间或不想阅读的，可以直接略过，嘻嘻嘻...

SwiftUI定义

2019年WWDC大会上，苹果在压轴环节向大众宣布了基于Swift语言构建的全新UI框架——SwiftUI，开发者可通过它快速为所有的Apple平台创建美观、动态的应用程序。
SwiftUI在iOS13、macOS10.15、tvOS13和watchOS6上运行。而且SwiftUI的运行速度优于UIKit，他减少了界面的层次结构，因此减少了绘制步骤，并且他完全绕过了CoreAnimation，直接进入Metal。
SwiftUI是一个用户界面开发工具包，它让我们使用声明式（declarative）编程的方式设计应用。这是一种很酷的说法，他的意思其实就是：我们需要告诉SwiftUI，我们的UI应该长成什么样子；当用户和它互动（interact）的时候，我们的UI应该如何反应。
SwiftUI 作为 Apple 在自家平台使用 Swift 语言打造的首个重量级系统框架，将为这个平台上用户界面的构建方式带来革命性的转变。它摒弃了从上世纪八十年代开始就一直被使用的指令式 (imperative) 编程的方式，转而向投声明式 (declarative) 编程的阵营，这提高了我们解决问题时所需要着手的层级，从而让我们可以将更多的注意力集中到更重要的创意方面。

关于SwiftUI的推广

在 SwiftUI 出现之前，苹果不同的设备之前的开发框架并不互通，移动端的⼯程师和桌⾯端的⼯程师需要掌握的知识，有很⼤⼀部分是差异化的。比如iOS、macOS、WatchOS，这种碎片化的开发体验无疑会大大增加开发者所需消耗的时间精力，也不利于构建跨平台的软件体验。苹果希望直接优化语言本身，并统一所有设备的开发体验，让开发者更容易上手，也更容易将心里的想法转化为运行的程序。
除了统一终端以外，苹果也在想方设法增加开发者的数量，提升单个应用质量。方式也非常符合第一性思维原则——降低开发的难度。所以先有了 Swift，紧接着又推出了 SwiftUI，基本就可以看做苹果在推广新语言的过程中一个里程碑式的节点。

SwiftUI特点

1.界面布局简便

在 UIKit 框架中，由于坐标系统的存在，界面上的每一个元素都需要开发者进行布置，有时候计算量会非常大也非常繁琐，例如长宽的改变或是屏幕可视面积的变化等。这种线性的方式被称为指令式 (imperative)编程。以一行文字为例，放置在哪个坐标、宽度多少、在哪里换行、怎么断句、字形字号是多少、最终高度多少、是否需要缩小字号来完全显示等，这些都是开发者在制作界面时要考虑和计算妥当的问题。到了新设备发布，用户可能会换更大屏幕的手机，系统支持动态字体调节等新功能，此时原先的程序不进行适配就可能出现显示问题，开发者就需要回头进行程序的重新调试。
换做 SwiftUI之后，上述的很多变量就被系统接管了，也取消了坐标系统，开发者要做的就是直观的告诉系统放置一个图像，上面加一行文字，右边加一个按钮。系统会根据屏幕大小、方向等自动渲染这个界面，开发者也不再需要像素级的进行计算。这被称为声明式 (declarative) 编程。

2.链式调用修改属性

链式调用是 Swift 语言的一种特性，就是用来使用函数方法的一种方式。可以像链条那样不断地调用函数，中间不需要断开。使用这种方式可以大大减少代码量。
除了系统提供的属性可以使用之外，开发者也可以进行自定义。例如将不同字体、字号、行间距、颜色等属性统合起来，可以组合成为一个叫「标题」的文字属性。之后凡是需要将某一行文字设置成标题，直接添加这个自定义的属性即可，使用这种方式进行开发无疑能够极大的避免无意义的重复工作，更快的搭建应用界面框架。

3.界面元素组件化

理论上来讲，每一个复杂的视图，都是由大量简单的单元视图构成。但是函数方法可以包装起来，做到仅在有需要的时候进行调取使用。在 UIKit 框架下的页面元素解耦却不太容易，一般都是针对某种特定情境，很难进行移植。有时候可能手机横屏就会让页面元素混乱，就更别论页面元素的组件化了。
不过 SwiftUI 在布局上的特点，却可以便捷的拆分复杂的视图组件。单一的组件不仅可以自由组合，而且在苹果的任意平台上都可以使用该组件，达到跨平台的实现。
一般我个人会将视图组件区分为基础组件、布局组件和功能组件。因为 SwiftUI 的界面不再像 UIKit 那样，用 ViewController 承载各种 UIView 控件，而是一切都是视图。这种视图的拼装方式提高了界面开发的灵活性和复用性。

4.与UIKit彼此相容

一般开发者学习新技术有一个最大的障碍就是原先的项目怎么办？但 SwiftUI 在这一点上考虑得非常周到。由于是一个新发布的框架，UI 组件并不齐全，当 SwiftUI 中并没有提供类似的功能时，就可以把 UIKit 中已有的部分进行封装，提供给 SwiftUI 使用。开发者需要做的仅仅是遵循UIViewRepresentable协议即可。相反，在已有的项目中，也可以仅用 SwiftUI 制作一部分的 UI 界面。
当然两种代码的风格是截然不同的，但在使用上却基本没有性能的损失。在最终的运行效果上，用户也无法分辨出两种界面框架的不同。

5.单一数据源

一直以来复杂的UI结构都会创造更为复杂的数据和逻辑管理需求，每次在用户交互，或是数据来源发生变化的时候，能否及时更新相关界面组件，不然就会引起显示问题。
但是在 SwiftUI 中，只要在属性声明时加上 @State 等关键词，就可以将该属性和界面元素联系起来，在每次数据改动后，都有机会决定是否更新视图。这样就可以将所有的属性都集中到一起进行管理和计算，也不再需要手写刷新的逻辑。因为在 SwiftUI 中，页面渲染前会将开发者描述的界面状态储存为结构体，更新界面就是将之前状态的结构体销毁，然后生成新的状态。而在绘制界面的过程中，会自动比较视图中各个属性是否有变化，如果发生变化，便会更新对应的视图，避免全局绘制和资源浪费。（看到这里，突然想到Flutter的渲染更新机制，只渲染改变的部分，优化性能，单走一个6）
使用这种方式，读和写都集中在一处，开发者就能够更好地设计数据结构，比较方便的增减类型和排查问题。而不用再考虑线程、原子状态、寻找最新数据等各种细节，再决定通知相关的界面进行刷新。

6.设计工具&快速预览

Xcode 包含直观的设计工具，只需拖放操作就能使用 SwiftUI 轻松构建界面。当您在设计画布中操作时，您的每一项编辑都会与相邻编辑器中的代码保持完全同步。在您键入时代码会立即以预览形式显示，您对预览进行的任何更改会立即反映在您的代码中。Xcode 会即时重新编译您的更改，并将它们插入到 app 的运行版本中，方便您随时查看和编辑。
SwiftUI可与Xcode11以及上无缝协作，让代码和设计完美同步，同时还提供对动态类型、暗黑模式、本地化和可访问性的自动支持。

拖放操作。只需在画布上拖放控件，就能调整组件在用户界面中的位置。点按打开检查器，即可选择字体、颜色、对齐方式和其他设计选项，并可通过光标轻松重新排列控件。多数这些可视化编辑器也可在代码编辑器中使用，因此您可以使用检查器来探索各个控件的新修饰符，即使您偏好手动编写界面组件代码也没问题。您还可以将控件从资源库拖放到设计画布上，或者直接拖放到代码中。
预览。您现在可以为任何 SwiftUI 视图创建一个或多个预览来获取样本数据。用户能看见的任何内容 (例如大字体、本地化或深色模式)，你几乎都能配置。预览也可以显示您的 UI 在任何设备和方向上的呈现效果。

SwiftUI布局方式

SwiftUI采用前端开发中流行的弹性布局，可以说继承了弹性布局的大部分优点，并且也是声明式的语法。我们只需声明用户界面应具备的功能便可。例如，你可以写明你需要一个由文本栏组成的项目列表，然后描述各个栏位的对齐方式、字体和颜色。你的代码比以往更加简单直观和易于理解，可以节省你的时间和维护工作。
在学习了Flutter之后，SwiftUI的布局方式是真的和Flutter布局如出一辙，所以代码上面上手操作比较快，再者Swift语言的掌握，兴趣越来越浓厚。

响应式编程框架 Combine

在构建复杂界面的过程中，数据的流通一直是指令式编程中相当让人头疼的部分。
在 UIKit 框架下时，会配合 Target-Action或者 protocol-delegate 模式来交换信息，使用Key-Value Observing (KVO) 或者 Key-Value Coding (KVC) 来监测变化和读写属性。但即便开发者熟练地使用这些工具，面对日益增长的应用复杂性，掉坑里的可能性还是非常大。因为有太多需要开发者妥善处理的数据流动，例如数据改动后需要通知相关的页面进行刷新，或是让关联数据重新计算等。

像是 React Native 和 Flutter 这样的移动端跨平台方案，由于采用了声明式 UI 的编写方式和严格的数据流动方向，就能够大幅减轻开发者的思考负担。

SwiftUI 很明显也吸收了这些现代的编程思想，在另一个重量级系统框架 Combine 的协助下，实现了单一数据源的管理。

响应式编程的核心是将所有事件转化成为异步的数据流，这刚好就是 Combine 的主要功能。Combine 采用观察者模式，对应多个观察者，可以分别订阅感兴趣的内容。在 SwiftUI 的界面布局过程中，不同的 View 就是观察者，分别订阅了相关联的属性，并在数据发生变化之后就能够自动的重新渲染。

SwiftUI动画

在 SwiftUI 中，做动画变的十分简单。Apple 的教程里提供了两种动画的方式：
1、直接在 View 上使用 .animation modifier
2、使用 withAnimation { }来控制某个 State，进而触发动画。

对于只需要对单个 View 做动画的时候，animation(_:)要更方便一些，它和其他各类 modifier 并没有太大不同，返回的是一个包装了对象 View 和对应的动画类型的新的 View。animation(_:) 接受的参数 Animation 并不是直接定义 View 上的动画的数值内容的，它是描述的是动画所使用的时间曲线，动画的延迟等这些和 View 无关的东西。具体和 View 有关的，想要进行动画的数值方面的变更，由其他的诸如 rotationEffect 和 scaleEffect这样的 modifier 来描述。

能看到这里的童鞋，说明很有耐心嘛，👍，接下来我们就真正开始我们的SwiftUI之旅吧，go go go !!!