SwiftUI 初体验

SwiftUI 初体验

swift 发布于 2019年06月10日

刚刚过去的 WWDC 2019 开场演讲，可以说是干货多多， 发布了很多有意思的东西。对我们公众号的用户群来说， 我最先想要分享的那肯定就是 SwiftUI 了。 WWDC Keynote 中对 SwiftUI 做了一个快捷而直观的演示。

如上图所示， SwiftUI 提供一套全新的 API, 让开发者能够以所见即所得的方式编写 UI 界面。

我们来看看如何在 Xcode 11 创建 SwiftUI 界面吧。

创建项目

要使用 SwiftUI 的完整能力， 你必须使用 Xcode 11, 并且将你的 macOS 系统升级到最新的10.15 ，是的，除了 Xcode 你还要升级你的操作系统。目前他们还都是 beta 版，可以在苹果开发者网站直接下载。

安装好需要的 工具 后，创建新项目的时候，你可以看见多了一个选项 Use SwiftUI ：

勾选上它，就会在你的项目中创建 SwiftUI 模板。创建完项目后， 你会看到一个 ContentView.swift 文件， 打开它之后会展示这样的界面：

左边是代码编辑视图， 右边是 UI 预览视图。 我们看到，刚打开这个文件的时候右边的预览视图是空的。 你需要点一下右上角的 Resume 按钮，才能正常显示出来：

点击后，预览视图即可正常显示：

预览视图展现出来，需要编译一次。

代码结构

我们看一下 ContentView.swift 的初始代码：

import SwiftUI

struct ContentView : View {

var body: some View {

Text( "Hello World" )

}

}

# if DEBUG

struct ContentView_Previews : PreviewProvider {

static var previews: some View {

ContentView()

}

}

# endif

分成两个部分， struct ContentView 定义的是视图结构。 struct ContentView_Previews 是预览视图声明。 我们主需要关注第一部分， struct ContentView 。

双向交互

SwiftUI 的编辑器是双向交互的。 简单说就是你在左边代码编辑器的改动会立即反应到右边的预览视图。 同样，右边的预览视图也是可以编辑的，相应的改动也会同步到左边的代码视图。

如上图这样， 我们可以按住 Commond 键然后点击预览视图上面的组件， 就会弹出属性窗口：

属性窗口中，有很多可以对这个组件操作的选项，我们可以点击 Inspect , 这个选项代表设置当前组件的属性，然后会打开属性窗口，设置组件的文字，颜色等信息：

当你在右边的预览视图编辑完之后， 左边的代码视图也会做出联动的改变：

struct ContentView : View {

var body: some View {

Text( "Hello SwiftUI!" )

. font (. title )

. color (.red)

}

}

在 SwiftUI 中，通过 .font(), .color() 这样的形式给组件设置属性。

有一点需要和大家提一下，在现在 beta 版本的 Xcode 中， 这个操作不算很顺畅，当你对预览视图做出改动的时候，会稍微卡顿1-2秒左右，左边的代码视图才会联动。当然现在还是 beta 版本，难免存在小问题。

什么才是真正的双向交互呢，就是你不仅可以在预览视图通过 Command + 组件的方式打开属性编辑器，你同样可以在代码视图这么做：

按住 Command 然后在代码中点击相应组件的实例名，就可以再代码编辑器中打开属性窗口。 这个操作还是挺新颖的。也可以通过它发现 SwiftUI 的设计思路。

现在，我们了解了 SwiftUI 如何创建和设置基本的视图组件，以及它的操作流程。

再加入一个组件

如果想再添加一个组件怎么做呢， 有两种方法。 你可以直接再左边的代码编辑器中写代码,这个没什么可说的。 另一种方法是点击 Xcode 右上角的添加按钮：

然后就会打开组件选择界面：

拖动一个 Text 组件到 'Hello SwiftUI' 的下面：

这时，你的代码视图就会变成这样：

struct ContentView : View {

var body: some View {

VStack {

Text ( "Hello SwiftUI!" )

.font(.title)

.color(.red)

Text ( "Placeholder" )

}

}

}

两个 Text 被包含在了一个 VStack 里面。 VStack 是 SwiftUI 的一个布局容器，它里面的内容会竖向排列。 如果你把 VStack 去掉，直接放两个 Text 到代码中，编译器就会报错。 也就是说在 SwiftUI 中， Text 这样的UI组件，需要包含在容器中。

自定义组件

现在，我们了解了 SwiftUI 如何创建系统组件，以及将他们在界面上布局。 我们再来看一下，如何创建自定义组件。在 Xcode 11 中创建新文件，会增加这样一个模板 SwiftUI VIew:

点击创建，就会新建一个 SwiftUI 组件, 我们可以取名叫 LogoView:

然后在组件中创建一个 Image：

struct LogoView : View {

var body : some View {

Image( "logo" )

}

}

Image 是 SwiftUI 显示图片的组件，里面的参数是图片名称。 和 Swift 中 Image(named:) 参数的含义相同。

你可以上面这样通过代码的方式创建， 也可以按照我们前面的方法，在预览编辑器里面拖放。 最后的效果是一样的。 预览界面的中间会显示一个 SwiftUI 的 Logo:

下面，我们来给 Image 添加一些属性：

struct LogoView : View {

var body : some View {

Image ( "logo" ) .shadow ( radius : 10 )

.overlay (RoundedRectangle( cornerSize : CGSize( width : 10 , height : 10 ))

.stroke(Color.white, lineWidth : 4 ))

}

}

shadow 指定了阴影宽度。 overlay 给图片设置了描边。 设置好后，预览视图会显示出来效果：

使用组件

最后，我们把刚刚定义的组件，以及之前的主界面融合起来，然后再加入一些布局属性：

struct ContentView : View {

var body : some View {

VStack {

LogoView ()

Text ( "Hello SwiftUI!" )

.font (.title)

.color (.red)

Text ( "By Swiftcafe" )

Spacer ()

} .padding (EdgeInsets( top : 100 , leading : 0 , bottom : 0 , trailing : 0 ))

}

}

自定义组件 LogoView 使用起来很简单，直接将他写在相应的位置即可。 这里我们加入了两个布局属性 Spacer 和 padding。

VStack 底部的 Spacer()， 可以理解为一个填充组件，它可以将上面的视图顶到最上方， 而不是默认的垂直居中。

VStack 的 padding 属性相信也不难懂，我们在这里设置了一个顶部填充边距。

这两个布局组件结合起来就是， 我们在 VStack 的所有视图，被 Spacer() 顶到了最上方，然后又被 padding 的顶部边距属性，向下拉了 100pt，预览视图现在就是这样：

总结

虽然介绍的内容不多，但通过我这里给大家写的内容，相信大家应该对 SwiftUI 有了一个初步的了解。 我说说我的感觉，在 Xcode 11 beta 版中，SwiftUI 的表现还有些小瑕疵，比如代码提示，以及视图编辑后的代码联动还存在卡顿问题，就像早起的 Swift 语言编辑器一样，代码提示的速度也是明显比 Objective-C 要慢。不过相信这个问题会逐渐改善。

我觉得好的地方，就是实时的 UI 预览，会让开发者在调试界面的时候效率提升不少。大家应该比较有体会，尤其是在调整一些 UI 细节的时候，经常会反复的运行，修改程序。SwiftUI 能让这项工作轻松很多。

但同时，SwiftUI 使用的是全新的 UI 布局和语法系统，对于刚接触的开发者来说， 会有一定的学习曲线。不过既然苹果团队力推它，我相信它的表现应该不会太差。

另外， SwiftUI 发布的同时，在苹果开发者官网也推出了相应的教程，大家也可以参考:

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

这篇文章算是一个开篇吧， 后面我还会继续和大家分享对 SwiftUI 的更多研究。也欢迎大家一起交流。

如果你觉得这篇文章有帮助，还可以关注微信公众号 swift-cafe，会有更多我的原创内容分享给你~

本站文章均为原创内容，如需转载请注明出处，谢谢。

关注微信公众号

发现更多精彩

swift-cafe