cs193p-01 Memorize

cs193p 课程介绍:

斯坦福大学2023年春季学期的课程CS193p（使用SwiftUI开发iOS应用程序）是以面对面的形式进行的，但遗憾的是，这些课程并没有被视频录制下来。不过，我们确实捕捉到了演示和演示过程中的笔记本电脑屏幕以及相关的音频。你可以通过下面的链接观看这些屏幕录像。此外，你还会找到在学期中分发给学生的辅助材料的链接（包括作业、演示代码等）。

cs193p 课程网址: cs193p.sites.stanford.edu/2023

1. 课程主题：课程是关于开发iOS应用程序的，使用的是SwiftUI框架。
2. 适用设备：课程主要针对iPhone和iPad，但提到SwiftUI也可以在MacOS、Apple Watch和Apple TV上工作。
3. 跨平台内容：如果时间允许，课程中可能会涉及到一些跨平台开发的内容。

学习内容：

• 熟悉的内容：课程中会有一些你已经熟悉的内容，比如面向对象编程（OOP）和类似于C语言的编程语言。
• 新的内容：同时，课程中也会有很多对一些人来说全新的内容。
• Swift编程语言：你将学习Swift编程语言。
• 函数式编程：你将接触到函数式编程的概念。
• 响应式用户界面开发范式：包括MVVM（Model-View-ViewModel）架构在内的响应式用户界面开发范式。
• 面向对象的数据库：你还将学习面向对象数据库的概念。

课程内容

1. Canvas and Ed Discussion：这是两个在线平台，学生需要在整个学期中使用它们。Canvas通常用于课程管理，而Ed Discussion可能用于讨论和交流。
2. Demos：课程中会有很多演示（Demos），这些演示会在一个不断扩大的叙事背景下进行。
3. Narrative vs. Vignette：这里提到了叙事（Narrative）和小品（Vignette）的区别，但具体内容没有给出，可能是指课程内容的组织方式或者教学方法。
4. Lecture Slides：这部分是关于讲座幻灯片，主要用于讲解概念。
5. Reading Assignments：阅读作业，用于学习Swift编程语言，只在前四周提供。
6. Programming Assignments：编程作业，课程中会有6个这样的作业，主要在前7周内完成。
7. Final Project：最终项目，将在课程的最后3周进行。
8. Let's get started! ：这是一个鼓励性的语句，意味着课程即将开始。
9. We're going to start by building an application together over the first few weeks Starting right now... ：这句话说明课程的开始将通过在前几周内一起构建一个应用程序，从现在就开始。

第一个作业：Memorize

• 第一个作业是个卡片游戏

创建新的iOS项目

选择 File -> New -> Project

"Hello World" 代码

完整的 "Hello World" 代码

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

struct 和 View

struct ContentView: View {
      ...
      ...
}

• struct 代表结构体，它是SwiftUI的核心。它可以包含变量和函数。Swift不是面向对象的编程语言，因此 struct 不是 class。它是函数式编程。
• ContentView 是结构体的名称。
• View 意味着 ContentView 结构体像一个 View ，遵循 View 协议

var

struct ContentView: View {
    var body: some View {
            ...
            ...
    }
}

• var 是一个变量的关键字，body 是变量名。其他变量可能如下所示：

var i: Int
var s: String

计算属性 (Computed Property)

让我们看看 body 中的内容：

    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }

• var body 是一个属性，body 变量的值不会存储在某个地方，而是在每次程序运行时都会计算一次。在 "Hello World" 代码中，它计算的是如下部分：

                                                {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }

some View 与 String 或 Int不同。它一定是某种类型的 View，但可以是不同类型的 View，只要它是一个 View 即可。

VStack

        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }

• creating instance of structs(创建结构体实例)：像图像结构体 Image(systemName: "globe")；或文本结构体 Text("Hello, world!")。
• named parameters：systemName 是一个参数名。
• Parameter defaults：还可以指定其他参数，但我们可以使用默认值。
• 这个 VStack 有两个结构体，它们都像一个 View 一样。它包括 Image 和 Text 结构体。但是，VStack 本身也是一个像 View 一样的结构体。我们可以为 VStack 提供参数，例如：

        VStack(alignment: .leading, spacing: 20) {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }

• 那么 VStack 内部的整个内容呢？

  • 这是 VStack 的一个参数，完整内容应该如下所示：

        VStack(content: {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        })

• VStack 也被称为 @ViewBuilder。@ViewBuilder 可以将视图列表（Image、Text）转换为 TupleView。
• VStack 是一个 返回 content 参数列表中视图组的函数

View modifier

            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)

• .imageScale 和 .foregroundStyle 称为 View modifier。View modifier 将值返回给 .imageScale，然后 .imageScale 也返回给 .foregroundStyle。因此，它们可以连接在一起。

View modifier 的作用域

视图修改器的作用域很重要。如果作用域不同，将显示不同。

▲ 作用域 1

▲ 作用域 2

开始创建卡片

▲ 创建一个带有白色背景的单张卡片

▲ 创建4张卡片

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            CardView(isFaceUp: true)
            CardView()
            CardView()
            CardView()
        }
        .foregroundColor(.orange)
        .padding()
    }
}

struct CardView: View {
    var isFaceUp: Bool = false
    var body: some View {
        ZStack(content: {
            if isFaceUp {
                RoundedRectangle(cornerRadius: 12)
                    .foregroundColor(.white)
                RoundedRectangle(cornerRadius: 12)
                    .strokeBorder(lineWidth: 2)
                Text("👻").font(.largeTitle)
            } else {
                RoundedRectangle(cornerRadius: 12)
            }
        })
    }
}

#Preview {
    ContentView()
}

▲ 创建4张卡片，并带有一个可以控制卡片正反面的参数

注意：每个 变量（var） 必须有一个值，但我们可以设置一个默认值。