“SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift.”
—— Apple
SwiftUI
是苹果相关开发的新方式。2014年,在多年使用 Objective-C
编程应用程序之后,苹果推出了一种新的开源语言: Swift
,震惊了世界。自发布以来,Swift
不断更新和发展,最终成为当今最受欢迎和最强大的编程语言之一。
2019年 SwiftUI
的推出为该行业的范式转变创造了另一个机会。在多年使用 UIKit
和 AppKit
来创建用户界面之后,SwiftUI
为你的应用程序提供了一种全新的 UI
创建方式。在很多方面,SwiftUI
都比它的前辈更简单、更强大,更重要的是,它在苹果生态系统中是跨平台的。
不过,最重要的一点是 SwiftUI
的声明性。多年来,开发人员一直在使用命令式编程模型,处理状态管理问题和复杂的代码。但是现在,我们提供了一种声明性的、直接的方法来构建令人惊叹的用户界面。别担心;如果你喜欢使用 UIKit
或 AppKit
,请放心,你可以将这些框架与你的 SwiftUI
代码集成在一起。
SwiftUI 仍有改进的空间; 正如Swift从1.0版开始就必须不断发展一样,SwiftUI也将如此。但正如Swift已经成为先进的现代编程语言的行业标准之一,SwiftUI肯定也会走同样的道路。
这里会分享创建用户界面的新方法的所有提示和技巧。你́会发现SwiftUI提供了什么,它是多么强大,开始使用它是多么快速和容易。
创建一个小的颜色匹配游戏。该应用程序的目标是通过从RGB颜色空间中选择颜色来尝试匹配随机生成的颜色:
在本篇中,您将:
- 学习如何使用Xcode画布创建你的UI与它的代码并排,并看看他们如何保持同步。对一边的更改总是会更新另一边。
- 为图片中的滑块创建一个可重用的视图。
- 了解@State属性,并在状态值改变时使用它们更新你的UI。
- 呈现提示以显示用户的分数。是时候开始了!
SwiftUI 入门
从章节材料中打开SwiftUI/RGBullsEye启动项目。
在项目导航器中,打开RGBullsEye组,看看这里是什么: AppDelegate.swift,你可能已经习惯了,现在是RGBullsEyeApp.swift。这将从ContentView()创建应用程序的WindowGroup:
1 | @main |
@main属性意味着这个结构体包含应用程序的入口点。应用程序协议负责生成实际运行的静态 main 函数。当应用程序启动时,它会显示 ContentView 的这个实例,它在 ContentView.swift 中定义。它是一个符合 View 协议的结构:
1 | struct ContentView: View { |
这是 SwiftUI 声明 ContentView 的主体包含一个显示 Hello World 的 Text 视图。padding() 修饰符在文本周围添加10个点填充。
有一个 Model 组包含了定义带有属性和方法的 Game 结构的文件,以及一个用于包装红色、绿色和蓝色值的RGB结构。Color 扩展提供了一个自定义初始化器来从 RGB 结构创建一个 Color 视图。
预览 ContentView
在 ContentView.swift 中,在 ContentView 结构体下面,ContentView_Previews 包含一个包含 ContentView 实例的视图:
1 | struct ContentView_Previews : PreviewProvider { |
在这里,您可以为预览指定示例数据,并可以比较不同的屏幕和字体大小。但是预览在哪里呢?
代码旁边有一大块空白,上面是这样的:
默认情况下,预览使用当前活动的方案。
点击 Resume 并等待一段时间来查看预览:
点击文本显示填充框。
注意:如果你没有看到 Resume 按钮,点击编辑器选项按钮并选择 Canvas 如下图:
如果您仍然没有看到 Resume 按钮,请确保您正在运行 macOS Catalina(10.15) 或更高版本。
注意:你可以使用非常有用的键盘快捷键 Option-Command-P,而不是点击 Resume 按钮。即使在您更改视图中的某些内容后,Resume 按钮没有立即显示,它也可以完成页面刷新。
自定义界面
你的 SwiftUI 应用程序没有 storyboard 或视图控制器。ContentView.swift 接管了他们的工作。你可以使用任何代码和拖拽对象库的组合来创建你的 UI,并且你可以直接在你的代码中执行类似故事板的操作!最棒的是,一切都保持同步!
SwiftUI 是声明性的:你声明你想要的UI外观,然后 SwiftUI 将你的声明转换成高效的代码来完成任务。苹果鼓励您创建尽可能多的视图,以保持您的代码易于阅读。特别推荐可重用的参数化视图。这就像将代码提取到函数中一样,您将在本章的后面创建一个函数。
在这里,主要使用canvas,类似于在Interface Builder (IB)中布局你的UI。
SwiftUI 关键词
在开始创建视图之前,您需要了解一些词汇表。
Canvas 和 Minimap :要获得完整的SwiftUI体验,你至少需要Xcode 11和macOS 10.15。然后你就可以在canvas中预览应用的视图,以及代码编辑器。此外,你还可以使用你的代码的Minimap:它不会出现在我的截图中,因为我隐藏了它: Editor long ▸ HideMinimap。
Modifiers:你可以调用修改器方法来修改前景色、字体、填充等等,而不是设置UIKit对象的属性或属性。
Container views:如果你以前使用过堆栈视图,你会发现在SwiftUI中使用HStack和VStack容器视图创建这个应用的UI非常容易。还有其他容器视图,包括ZStack和Group。将在后面文章中
“介绍堆栈和容器”
中了解它们。
除了Container views,还有许多你知道并喜欢的UIKit对象的SwiftUI视图,如文本,按钮和滑块。工具栏中的+按钮显示SwiftUI视图和修改 类库,以及媒体和代码片段。