SwiftUI Tips 001：SwiftUI 概览

Posted 2021-04-27 知识小集

SwiftUI 是一个 UI 框架，具备了 UI 框架所需要的基本功能，包括视图、控件、布局系统、动画、手势等，同时为了和现有的 UIKit/AppKit 整合，还提供了相应的集成方案。在这里我们简单了解一下 SwiftUI 的组成。

用户界面

用户界面主要分四块：视图与控件、视图布局与展示、绘制与动画、框架集成。

视图与控件即我们在界面上看到的视图元素，可以向用户展示内容。视图包含文本、图像、形状、自定义绘制以及由这些元素组成的复合元素；控件则提供了与用户交互的方式，如按钮、选择器等。视图与控件的各种属性（如大小、边框、阴影等）可以通过修饰符(modifier)来指定。目前 SwiftUI 提供的视图与控件相较 UIKit 来说还不是那么丰富，如缺少 Webview 这种常用的视图。不过我们就可以通过后面所说的集成方案来使用现有 UIKit 中的视图或控件。

视图布局与展示部分的目标是将视图与控件更好的组织起来，以更优雅的方式展示给用户。这部分的元素可以看作是一种视图容器，如我们常见的列表（List）、分组（Group）等，它们可以将视图组织成一种层次结构。SwiftUI 的布局系统以类 Flex 的方式为我们提供了一套简洁而高效的布局方式，对 ios 开发者来说绝对是一个福音。

绘制与动画部分主要提供了如颜色（Color）、形状（Path, GeometryEffect）、渐变（Gradient）等的元素，以及各种动画特效，这些元素可以让我们的 UI 更加丰富和生动。

框架集成部分则为我们将 SwiftUI 与现有的 UIKit/AppKit 一起使用提供了解决方案。这个集成方案是双向的，即可以将 UIKit/AppKit 的视图/视图控制器添加到 SwiftUI 中，也可以将 SwiftUI 视图添加到 UIKit/AppKit 中，同时提供了两者之间的通信方案。这个集成方案的使用也很简单，只需要遵循相应协议并实现简单的几个方法即可。

数据与事件

有了 UI，还需要相关的数据和交互，进而就涉及到数据的管理。SwiftUI 为我们提供了丰富的数据管理方式，而如果再加上 Combine 框架，完全可以算得上是目前端侧开发的集大成者。这部分涉及到两个主题，即状态和数据流，以及手势处理。

状态与数据流负责控制和响应应用程序中的数据流及变更。SwiftUI 集成了现代前端框架的优秀思想，为我们提供了便捷的组件内部状态管理(@State)、父子组件间的数据通信（@Binding）、全局环境变量的处理（@EnvironmentObject）等数据管理方式。这些特性让我们可以以 MVVM 架构来开发整个应用，甚至也可以使用类 Redux 的方式来管理我们的数据流。而这些架构也是目前端侧开发的主流。除了语言层面外，这样的实现可以让有 web 经验的开发人员也快速适应 SwiftUI。

手势处理主要负责响应应用中各种手势动作，这个不用多解释，开发过移动应用的童鞋都知道。

Preview

Preview 是 SwiftUI 框架的一大亮点。它终于给了 iOS 开发人员梦寐以求的东西：Hot reload。这一点也是 web 开发、flutter 开发，甚至是 React Native 在开发效率上强于 native 开发的很重要的一点。所见即所得，我们不再需要因为修改了视图中一个字体大小而重新去走一遍繁琐的流程，能极大地提高开发效率。

小结

以上即是 SwiftUI 框架的主要内容，可以说并没有大多复杂的东西，整个框架简洁而高效。我们后续也将以一些简洁的小示例来展示 SwiftUI 的强大功能。