在 SwiftUI 中，ScrollView 是一个可滚动的视图。

创建一个 ScrollView

当我们使用ForEach 循环创建超出一整个屏幕的内容时：

1
2
3
4
5

VStack {
      ForEach(0..<100) { index in
          Text("当前行\(index)")
      }
  }

在上面的代码中，我们使用VStack和ForEach 创建了 100 个Text，此时要显示的内容已经超出了一个屏幕所能显示的内容，我们无法看到超出屏幕范围的内容。为了解决这个问题，我们就可以在最外层嵌套一个ScrollView，让整个视图变成滚动显示的。

1
2
3
4
5
6
7

ScrollView {
            VStack {
                ForEach(0..<100) { index in
                    Text("当前行\(index)")
                }
            }
        }

此时，我们就可以通过上下滚动的方式查看所有的Text 了。

创建 List

在之前的List 使用中，我们是直接使用ForEach 循环遍历一个数组来实现的，在遍历的时候我们把self 作为List中必须的ID。接下来，我们通过自定义一个数据对象同时让它实现Identifiable。

1
2
3
4

struct Ocean: Identifiable {
    let name:  String
    let id: String = UUID().uuidString
}

在上面的代码中，我们自定义了一个结构体类型的对象Ocean ，同时让它实现了Identifiable 协议。在实现这个协议之后，它需要结构体的有一个名为id的成员属性，然后这个属性的值我们直接通过UUID().uuisString 创建一个字符串类型的值给它，这样可以实现之后创建的每一个Ocean 实例对象都有一个唯一的ID，便于我们在List 遍历时使用。

在很多 app 中，我们经常能看到上下滚动的列表，在 SwiftUI 中，我们可以使用List 实现这样的功能。

创建一个列表

要实现一个列表，我们需要先创建一个数组类型的数据源：

1

var books: [String] = ["西游记", "红楼梦", "三国演义", "水浒传"]

使用 ForEach 遍历数组，将元素显示到 List中：

1
2
3
4
5

List {
    ForEach(books, id: \.self) { book in
         Text("《\(book)》")
    }
}

除了上面的这种方式，我们还可以直接将数据元给到List，然它进行循环创建列表：

1
2
3

List(books, id: \.self) { book in
            Text("《\(book)》")
}

这里我们注意到，不管是我们使用哪种方式，我们都需要设置一个id的参数，这是因为List 要求每一行的元素都要有一个唯一的id，以便我们后续对List 进行编辑操作。这里我们是直接将循环出来的元素对象本身作为id 给它。

注意，这在数据源中元素不会出现重复的情况下是可行，但是如果存在重复相同的元素，就会出现编辑异常的情况。

在 SwiftUI 中，Label 用来展示一个文本和图标（icon）。

使用

使用Assets 中的图片作为Label 的图标：

1

Label("avatar", image: "avatar")

使用SF Symbols 中的图标作为Label 的图标：

1

Label("apple", systemImage: "apple.logo")

设置不同的Label样式

可以使用labelStyle 修饰器来定义 Label 的样式：

• iconOnly : 只显示图标；
• titleAndIcon: 显示文字和图标，默认样式；
• titleOnly ： 只显示文字；
• automatic：自动。

1
2

Label("apple", systemImage: "apple.logo")
   .labelStyle(.automatic)

首页界面开发与点击交互

项目创建和基础配置介绍完成后，接着我们来完成待办清单的首页开发。

创建文件和文件夹

在Xcode左侧项目导航栏中，选择二级目录下的项目名，鼠标右键点击 New Group 创建一个名为 View 的文件夹：

创建后的项目结构如下：

这个文件夹将来存储我们之后创建的所有视图代码文件。

在 SwiftUI 中，我们会经常使用到 VStack、HStack、ZStack 来帮助我们进行布局。

VStack

在VStack中的子视图都将按照垂直方向进行排列。

例如：

1
2
3
4
5

VStack {
    Image(systemName: "globe")
    Text("Hello, World!")
        .font(.body)
}

此时的布局效果如下：

文字内容切换效果

界面布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

struct ContentView: View {
    @State private var text: Int = 0
    var body: some View {
        VStack(spacing: 20) {
            Text("$\(text)")
                .font(.largeTitle.bold())
                .contentTransition(.numericText(value: Double(text)))
            Button {
                withAnimation(.bouncy) {
                    text = .random(in: 100...10000)
                }
            } label: {
                Text("Update")
            }

        }
        .padding()
    }
}

效果如下：

Xcode 基础设置

设置代码编辑器的字体和整体样式

创建好项目之后，使用快捷 Command + , 或者顶部菜单栏的 Xcode→Settings 打开Xcode的偏好设置，在 Themes 主题选项部分可以选择或者设置代码编辑器的代码风格和字体大小：

项目创建和基础配置说明

创建项目

1、打开Xcode

Xcode的初始界面存在三种不同的项目创建方式：

Create a new Xcode project: 创建一个全新的工程项目，最常用的项目创建方式；

Cone an existing project: 克隆一个项目，适用于已经存在并且使用Git或SVN版本管理工具管理的项目；

Open a project or file： 打开一个本机已经存在的项目或文件。

Swift 中的枚举

在计算机编程中，枚举是一种数据类型，用于定义一定范围内的有名称的值。Swift语言中的枚举是强大且灵活的工具，我们可以在多种场景中使用它们，包括但不限于处理特定类型的数据、创建自定义的错误类型以及实现特定的设计模式。

定义和基本用法

在Swift中，我们使用enum关键字来定义枚举。下面是一个简单的例子，展示了如何定义和使用一个名为Weekday的枚举，表示一周中的每一天：

1
2
3
4
5
6
7
8
9

enum Weekday {  
    case Monday  
    case Tuesday  
    case Wednesday  
    case Thursday  
    case Friday  
    case Saturday  
    case Sunday  
}