让不懂编程的人爱上iPhone开发(2020春iOS13+Swift5.1+Xcode11版)-07

欢迎回来,目前我担心的是,这个版本的还没来得及更新完成,WWDC 2020都已经快到了~

添加一点互动

到目前为止,我们的应用只能显示静态的文本,而且没有任何的互动。

这样显然有点无趣,还是让我们来增加点交互元素吧。

我们需要添加一个新的按钮,上面写着“快过来点我!”

要实现这一点有两种方式,一种是直接在代码编辑器中添加代码,另一种则是直接拖曳一个UI元素到界面上。

首先回到ContentView.swift,点击Xcode右上角的+加号,从这里我们可以轻松抵达Library。


点击+号后可以看到弹出了Library:

Library可以看做Xcode官方提供的资源仓库,我们可以从里面找到需要的UI元素,并拖曳到项目中。

这些资源可以分为三个主要的种类-Object,Image和Color。

在Library窗口中选择最左侧的Object,

按住鼠标左键不放,把Button从Lbirary的列表中拖曳到Canvas画布上,放到文本的下面。此时会看到在文本下面出现一个蓝色的线,以及类似下面的弹出窗口。

此时注意观察代码编辑器,可以看到里面已经出现了新的代码。

此时代码已经变成了下面这样的:

struct ContentView: View {
 var body: some View {
 VStack {
 Text("2020年面对困难不要害怕,武汉加油!")
 .fontWeight(.black)
 .foregroundColor(.red)
 Button(action:{}) {
 Text("Button")
 }

 }
 }
}

首先看看新添加的Button对象和相关代码:

 Button(action:{}) {
 Text("Button")
 }

注意到,在上面的代码中,在小括号中有action:,

可能大家已经懵逼了,这是什么奇怪语法。

其实在Swift中,:的意思是“是一个”,而花括号中通常放着一堆代码,或是一个小的程序(不是微信小程序~)。

所以这里action:{}的意思是,action是一个小程序。

它的作用是,当按钮被按下时,会执行花括号里面的代码。

另外,Button对象又包含了一个Text文本子对象,上面显示了按钮的内容。

在上面这段代码中,我们注意到又出现了一个新玩意儿,也就是VStack,它是vertical stack的缩写,也就是说一个视图中包含了多个子视图,而且用垂直的方式排列。

目前我们先不去研究VStack的深层次含义,只需要知道它的作用就好。

1.VStack中包含了两个视图,分别是文本和按钮。

2.文本显示在按钮的上方

如果你觉得看这段话不明白,不如看看下面这个图:

接下来让我们修改按钮的文本显示,更改代码如下:

 Button(action:{}) {
 Text("过来打我啊")
 }

点击Xcode工具栏上的运行按钮,可以看到模拟器上出现下面的画面:

不过此时点击按钮,没有任何反应。

这是因为我们还没有定义按钮被点击后要触发的事件。

响应按钮点击

回到刚才的代码,

 Button(action:{}) {
 Text("过来打我啊")
 }

刚刚我们提到过,在action:{}的花括号中,我们将增加一些代码,从而在点击按钮的时候,触发这个“小程序”。

更改代码如下:

 Button(action:
 {
 print("这辈子都没见过这样的要求~")
 }) {
 Text("过来打我啊")
 }


利用print()函数的强大功能

此时点击Xcode工具栏上的运行按钮,可以在模拟器上跟按钮交互了。

只不过,此时我们只能在Console视图中看到响应结果。

这里我们利用了print()函数。

函数是方法的一种特殊形式,它跟方法的重要区别在于,函数不需要跟对象绑定。换句话说,它是代码世界的独立生命体,不需要依附于某个对象存在。

在Swift中,当我们看到类似fontWeight()或print()这种在名称之后直接跟着小括号的代码时,很可能就是函数或方法。

区别在于,方法名的前面往往是对象,比如Text(“Hello”).fontWeight(.black),而函数就简单了,孑然一身,了无牵挂。

print()函数的作用是在Xcode的Console视图中输出我们需要的信息,通常用作程序调试。简单来说,我们会利用print()函数来确认程序是否正常且正确的运行。

所谓正常的运行就是没有bug,不至于中途突然崩溃。所谓正确的运行就是程序按照我们的意图在执行命令,不会把1+2=3算成了1+2= -3。

还有一点需要强调的是,因为print()是一个调试工具,所以只有开发者才能看到它输出的信息,而最终的用户是根本看不到这些信息的。

所以,我们在此并没有真正实现让按钮和用户进行交互的目的。

那么,怎么办呢?我们下一课再见~

编辑于 05-09

文章被以下专栏收录