SwiftUI学习条记day1---Stanford lecture1

SwiftUI学习条记day1—Stanford lecture1

• 课程链接：Lecture 1 | Stanford CS193p 2023
  
• 课程大纲：
  
• 代码仓库：github/iOS
  

---

  
1.在Xcode中创建一个swiftUI的工程

• 首先你必须拥有一个apple id(最平凡的apple id就可以，因为我们只是学习并不必要上架app)
  
• 打开Xcode的接待界面直接点击new project即可：
  
  
  
  
• 继续选择app：可以看到Xcode还可以创建其他类型的项目不过我们这里先创建一个app类型的工程
  
  
  
  
• 接下来有一些信息必要填写一下，以下是信息的含义和留意事项：
  

   

• Product Name：你要创建的应用名称，也会用于生成 Bundle Identifier。
  
• Team：选择你的开辟者账号或个人团队，用于签名和发布应用。
  
• Organization Identifier：通常是反向域名格式，用来标识组织或个人，也会组合进 Bundle Identifier。
  
• Bundle Identifier：应用的唯一标识，和上架、签名精密相关，不可随意更改。
  
• Testing System：指定测试框架（如 XCTest），可选择是否创建测试文件。
  
• Storage：设置项目存储位置，如本地或 Git 仓库。
  

  留意：一旦正式发布到 App Store，Bundle Identifier 将不可更改，要事先规划好。

• 紧接着为你的工程选择一个合适的目录举行存储，之后点击create就会创建好一个工程了
  
  
  
  

2.简单认识Xcode这个IDE

其实我已经利用过一段时间的Xcode了，但是Xcode其实另有很多功能还没有效到，这里我用一张简短的视频表示Xcode如今我掌握到的功能以及一些细节：
3.尝试明白示例代码

• 示例代码和预览效果：
  
  
  
  -下面我们对这段 SwiftUI 代码做一个非常详细、底层语法级别的表明，逐行剖析每个语法布局和细节。
  

---

• 模块导入
  

1. import SwiftUI

复制代码

• 功能阐明：
  利用 import SwiftUI
  导入了 SwiftUI 框架。SwiftUI 是苹果提供的声明式 UI 框架，包含了大量用于构建用户界面的类型和工具。
  
• 底层语法细节：
  
  
  
  • import 是 Swift 语言的关键字，用于引入模块（module），让代码可以或许利用该模块中定义的全部公共接口和类型。
    
  • 模块名称 SwiftUI 指定了必要加载的库，如许可以利用 SwiftUI 提供的视图、布局、控件和其他相关功能。
    
  
  

---

• 定义视图布局体
  

1. struct ContentView: View {
2.     ...
3. }

复制代码

• 功能阐明：
  定义了一个名为 ContentView 的布局体，并声明其遵循 View 协议，从而成为一个可以被 SwiftUI 渲染的视图。
  
• 底层语法细节：
  
  
  
  • struct 关键字定义了一个布局体（值类型），在 Swift 中布局体是一种常用的自定义数据类型。
    
  • ContentView 是布局体的名称。命名时遵循大驼峰命名法。
    
  • 冒号 : 后面跟着的是一个协议名称 View。这意味着 ContentView 必须满足 View 协议的全部要求。
    
  • Swift 中的协议（protocol）定义了一系列方法、属性或其他要求，View 协议规定了一个视图必须实现的接口，最重要的是必须提供一个 body 属性。
    
  
  

---

• 实现视图的主体
  

1. var body: some View {
2.     VStack {
3.         ...
4.     }
5.     .padding()
7. }

复制代码

• 功能阐明：
  
  
  
  • 定义了一个名为 body 的盘算属性，它必须返回符合 View 协议的内容。SwiftUI 利用该属性来确定如何绘制这个视图的界面。
    
  • 利用了 Swift 的不透明返回类型（some View），表示返回值符合 View 协议，但详细类型对调用者是隐藏的。
    
  
  
• 底层语法细节：
  
  
  
  • var 声明了一个变量属性。由于 body 是只读盘算属性（没有 set 方法），它实际上体现得像常量。
    
  • body 的类型被声明为 some View，其中 some 关键字利用了 Swift 的不透明返回类型特性，答应隐藏详细的视图类型细节，只必要保证返回的内容满足 View 协议即可。
    
  • 大括号 { ... } 内部定义了该属性的盘算逻辑，也就是返回值。Swift 中的盘算属性不必要显式返回语句（如果只有一行表达式，可以省略 return）。
    
  
  

---

• 垂直堆叠视图（VStack）
  

1. VStack {
2.     Image(systemName: "globe")
3.         .imageScale(.large)
4.         .foregroundStyle(.tint)
5.     Text("Hello, world!")
7. }

复制代码

• 功能阐明：
  
  
  
  • VStack 是一种容器视图，用于将其子视图垂直分列。
    
  • 该容器中包含两个子视图：一个图像和一个文本。
    
  
  
• 底层语法细节：
  
  
  
  • VStack { ... } 利用了尾随闭包语法，这在 Swift 中非经常见，用于将一段代码块作为函数的参数通报。
    
  • 括号内的代码块定义了 VStack 的子视图。SwiftUI 内部利用视图构建器（ViewBuilder）机制，将闭包中的多个表达式组合成一个复合视图。
    
  
  

---

• Image 视图
  

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

复制代码

• 功能阐明：
  
  
  
  • 利用 Image(systemName: "globe") 创建了一个系统符号图标，这里利用的是 SF Symbols 中的 "globe" 图标。
    
  • 随后通过链式调用了两个视图修饰符（modifiers）：.imageScale(.large) 和 .foregroundStyle(.tint)，分别调解图像的缩放比例和前景样式。
    
  
  
• 底层语法细节：
  
  
  
  • 构造函数调用：
    
    
    
    • Image(systemName: "globe") 是对 Image 布局体的初始化调用，传入的参数 systemName 是一个标签，用于查找对应的系统图标。
      
    
    
  • 链式调用（Method Chaining）：
    
    
    
    • .imageScale(.large) 调用返回一个经过修改的 Image 实例。.large 是一个枚举值，用于指定图像的体现大小。
      
    • .foregroundStyle(.tint) 应用前景颜色样式，这里利用 .tint 表示利用当前环境中的主色调或夸大色。
      
    
    
  • 每个修饰符都是 SwiftUI 提供的函数，这些函数通常会返回一个新的视图实例，而不改变原有视图。这种计划符合 SwiftUI 的声明式编程和不可变性原则。
    
  
  

---

• Text 视图
  

1. Text("Hello, world!")

复制代码

• 功能阐明：
  
  
  
  • 创建一个文本视图，体现字符串 "Hello, world!"。
    
  
  
• 底层语法细节：
  
  
  
  • Text 是 SwiftUI 中的一个布局体，用于在界面上渲染文本内容。
    
  • 构造函数直接传入一个字符串字面量。Swift 中的字符串是 String 类型，支持多种文本处置处罚功能。
    
  • 这里没有额外的修饰符，意味着文本利用默认样式体现。
    
  
  

---

• 应用修饰符到 VStack
  

1. .padding()

复制代码

• 功能阐明：
  
  
  
  • .padding()
    是一个视图修饰符，作用是在 VStack 外围添加默认的内边距，使其与别的视图之间保持一定的间隔。
    
  
  
• 底层语法细节：
  
  
  
  • 这也是一个链式调用。修饰符会返回一个新的视图实例，其中包含了原始 VStack 的布局信息及额外的内边距效果。
    
  • SwiftUI 的修饰符计划是函数式的，每个调用都是不可变操作，生成一个全新的视图描述。
    
  
  

---

• 预览代码
  

1. #Preview {
2.     ContentView()
3. }

复制代码

• 功能阐明：
  
  
  
  • 这段代码利用 SwiftUI 的预览功能，在 Xcode 中可以实时预览 ContentView 的界面效果。
    
  
  
• 底层语法细节：
  
  
  
  • #Preview 是一个特别的编译器指令或宏（详细细节可能会随 Xcode 版本变化），用于标志预览内容。
    
  • 花括号 { ... } 内部包含一个表达式 ContentView()，这实际上是调用 ContentView 布局体的默认初始化器生成一个视图实例。
    
  • 与传统的 PreviewProvider 协议实现方式相比，这种写法更加简洁，符合 SwiftUI 追求声明式和直观的计划风格。
    
  
  

---

• 代码总结
  
• 模块导入与布局体定义：
  利用 import 导入 SwiftUI 模块，并定义了一个遵循 View 协议的布局体 ContentView。
  
• 盘算属性和不透明返回类型：
  body 属性利用 some View 作为返回类型，隐藏了详细的实现类型，但确保返回内容符合 View 协议。
  
• 视图构建与尾随闭包：
  利用 VStack 将 Image 和 Text 视图垂直分列，通过尾随闭包语法简化代码布局。
  
• 链式调用的修饰符：
  图像和容器均通过链式调用应用了各自的修饰符，这种方式符合 SwiftUI 的函数式和不可变性计划。
  
• 预览机制：
  末了的 #Preview 代码块为开辟者提供了实时预览界面的能力，便于调试和视觉调解。
  

4.开始尝试修改代码完成一个卡片的ui代码

下面按照如下格式分步阐明如何构建这段代码，并在每个步骤中附上相关代码片段，同时表明为什么这么写。

---

构建步骤

4.1 新建 CardView 布局体

操作阐明：
在项目中创建一个新的 SwiftUI 视图文件，或者直接在 ContentView.swift 中添加一个新的布局体 CardView。
代码片段：

1. struct CardView: View {
2.     // 后续会在此添加属性和视图内容
3.     var body: some View {
4.         // 视图内容将在这里定义
5.         Text("Card")
6.     }
7. }

复制代码

为什么这么写：

• 利用 struct 定义视图符合 SwiftUI 的声明式编程方式，布局体是轻量级且高效的。
  
• 遵循 View 协议意味着这个布局体可以作为一个 UI 组件被渲染和组合到其他视图中。
  

---

4.2添加 isFaceUp 属性

操作阐明：
定义一个 Bool 类型的属性 isFaceUp，初始值设为 false。如许你可以根据必要设置卡片的正反面状态，方便后续控制卡片的体现内容。
代码片段：

1. struct CardView: View {
2.     var isFaceUp: Bool = false  // 默认显示背面
3.     var body: some View {
4.         // 后续会在这里构建视图内容
5.         Text("Card")
6.     }
7. }

复制代码

为什么这么写：

• 通过属性 isFaceUp 可以动态控制视图的状态（正面或背面），让代码具有更高的可复用性和扩展性。
  
• 默认值设为 false，使得当不通报参数时，卡片默认体现背面。
  

---

4.3利用 ZStack 构建条理布局

操作阐明：
接纳 ZStack 将多个图形元素叠加起来。根据 isFaceUp 的值决定体现哪种内容。
正面状态：
在 ZStack 内依次添加：

• 一个白色填充的圆角矩形
  
• 一个带边框的圆角矩形
  
• 一个体现心情符号 “