Swift第一课, Hello World

个人认为要学习一门全新的编程语言的最好方法就是不断练习, 边练边感受语言的特性, 对比自己之前学过的编程语言, 从而得到新的知识. 这篇文章将教你如何创建第一个使用SwiftUI的iOS工程, Hello World!

环境准备

一台安装MacOS的电脑
在AppStore安装Xcode
打开Xcode

Xcode打开界面

创建Hello World项目

在Xcode的打开界面, 选择Create a new Xcode Project
在接下来的打开界面中, 选择iOS -> 选择App项目

选择iOS -> 选择App项目

填写项目信息, Stanford的教程上是写的Memorize, 此处仍然使用Memorize. Identifier可以随便写, 简易写成某个域名的倒置顺序. 比如图中我写的域名是dshitpie.cn, 倒置过来就是cn.dshitpie

填写项目信息

来看看我们的IDE有什么

IDE界面

预览区: 可以在不启动iOS模拟器的情况下, 直接预览代码区的代码实时运行效果. 预览区实时预览需要在每次打开工程时, 点击预览区内的Resume按钮开启. 在代码区内产生较大代码变化的时候, 预览区的实时预览会自动关闭, 需要点击Resume才能重新进行实时预览.
可视化编辑区: 方便初学者通过图形化界面直观地改变某个组件的属性. 这里的属性, 以一个Text(文字)的属性为例, 是指: 文字的大小(Font), 字重(可以理解成字体粗细, Weight), 颜色(Color), 对齐方式(Alignment)等. 不同的组件会有适用于组件的特异性属性, 这些需要在后续工程中自己搞明白.

一般来说, 我们不怎么需要可视化编辑区. 如果你不需要它, 可以点击IDE的右上角像报纸一样的按钮, 以关闭可视化编辑区.

在? 康康代码?


// SwiftUI package是绘制App UI的库, 当需要写UI的时候, 就需要导入SwiftUI

// 当不需要写UI的时候, import Foundation来支持基础的数据类型及算法

// SwiftUI package中已经导入Foundation

import SwiftUI

struct ContentView: View {

    var body: some View {

        Text("Hello, world!")

            .padding()

    }

}

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

我们先忽略最后一个struct的代码, 暂且看第一个struct即可. 第一个struct的代码定义了界面的长相. 乍一看这个代码, 有几个需要注意的点, 这也是Swift最具有特色的几个特点:

SwiftUI中的视图使用了一种叫做View的东西, 并且通过类似继承的机制创建了ContentView. 在Stanford课程的第一课讲解里, View被定义为一种行为的载体, struct ContentView: View 被解释为定义了一个叫做ContentView的结构体(struct), 这个结构体具备View内的一切方法, 可以表现得像View一样, 并且还可以定义自己的额外成员. 没错, 从正常的理解来看, 其实这就是继承.
在ContentView中, 我们声明了一个叫做body的成员变量, 这个变量是View的入口, 实现这个body, 就可以返回写好的视图构建方法, 从而在IDE预览区中看到Hello World的字样.

Hello World预览图

从代码中, 我们还可以看到 var body: some View {...}. 这一行究竟应该怎么理解呢? 这就是SwiftUI函数式编程的一种体现了. 如果使用如下的写法, 可能我们会更好理解:


// 假代码, 仅仅方便理解

var body = buildSomeView();

some View buildSomeView() {

  return Text("Hello World");

}

没错, 这里的body值, 来源于一个叫做buildSomeView的方法, 且body的类型将会为some View类型. some View类型会在代码执行的时候决定到底是什么具体类型. 比如上面的代码中返回了Text类型, 所以代码在执行的时候, 执行效果会变成如下的样子:


// 假代码, 仅仅方便理解

Text body = buildSomeView();

Text buildSomeView() {

  return Text("Hello World");

}

没错, var被具体确定为了Text类型, 而buildSomeView的返回值类型也被确定为Text类型. 在此基础上, 我们尝试将函数以匿名的形式声明出来, 也就是所谓匿名函数的形式. 那在这种情况下要如何写代码呢? 请参考如下写法(仅作为演示, 代码不具备运行能力):


var body = () {

return Text("Hello World");

}

相信这种写法对于学过JS的人来说一定不陌生, 现在越来越多的语言开始支持这种来源已久的写法: Java, Kotlin, Dart... 这种写法的特色就是将变量的值通过执行一个函数获得, 而这个变量的类型将由编译器根据函数执行后的返回值类型来决定(some关键字. 关于some关键字的解读, 请参考文章SwiftUI 中的some关键字. 讲解得非常到位). 这种写法的好处请参考文章什么是函数式编程？函数式编程到底有什么好处？. SwiftUI的函数式编程大大发扬了这种写法, 将函数式编程作为SwiftUI的基调. 在大大简化函数式编程的代码量以后, Swift中, 可以直接用如下写法来实现函数式编程:


var body: some View {

  return Text("Hello, world!")

  .padding()

}

这种写法对学过Kotlin等语言的人来说一定不陌生, 变量的类型被写在了变量名称的后面, 更倾向于现代化编程语言的写法, 大括号内的内容就是函数的执行内容. SwiftUI在对于直接返回某个变量值的场景下, 允许直接省略return关键字, 所以如果你想代码更加简练的话, 你可以这么写:


var body: some View {

  Text("Hello, world!") // return被省略掉了

  .padding()

}

总结一下吧~

写到这里, 关于Hello World的一切大概就讲完啦. 回顾一下, 我们这次学到了什么呢?

如何创建iOS工程
IDE内的几大区域
Hello World的代码解读, SwiftUI的函数式编程初探

Stanford CS193p Swift 笔记(一)