SwiftUI学习条记day1---Stanford lecture1
SwiftUI学习条记day1—Stanford lecture1[*]课程链接：Lecture 1 | Stanford CS193p 2023
[*]课程大纲：
[*]代码仓库：github/iOS
https://i-blog.csdnimg.cn/direct/a768e78ed129487c8b92e5dbd732efa8.png
1.在Xcode中创建一个swiftUI的工程
[*] 首先你必须拥有一个apple id(最平凡的apple id就可以，因为我们只是学习并不必要上架app)
[*] 打开Xcode的接待界面直接点击new project即可：
https://i-blog.csdnimg.cn/direct/be406afd79cb4213a6914381020b3fdc.png
[*] 继续选择app：可以看到Xcode还可以创建其他类型的项目不过我们这里先创建一个app类型的工程
https://i-blog.csdnimg.cn/direct/17052771e0b946ae82607d4bdcebbbd8.png
[*] 接下来有一些信息必要填写一下，以下是信息的含义和留意事项：
[*]Product Name：你要创建的应用名称，也会用于生成 Bundle Identifier。
[*]Team：选择你的开辟者账号或个人团队，用于签名和发布应用。
[*]Organization Identifier：通常是反向域名格式，用来标识组织或个人，也会组合进 Bundle Identifier。
[*]Bundle Identifier：应用的唯一标识，和上架、签名精密相关，不可随意更改。
[*]Testing System：指定测试框架（如 XCTest），可选择是否创建测试文件。
[*]Storage：设置项目存储位置，如本地或 Git 仓库。
留意：一旦正式发布到 App Store，Bundle Identifier 将不可更改，要事先规划好。
https://i-blog.csdnimg.cn/direct/ca048d0283c24feb8930343b89430339.png
[*]紧接着为你的工程选择一个合适的目录举行存储，之后点击create就会创建好一个工程了
https://i-blog.csdnimg.cn/direct/9fc1a4fee9b44cef8a9c5abee1746cd6.png
2.简单认识Xcode这个IDE
其实我已经利用过一段时间的Xcode了，但是Xcode其实另有很多功能还没有效到，这里我用一张简短的视频表示Xcode如今我掌握到的功能以及一些细节：
3.尝试明白示例代码
[*]示例代码和预览效果：
https://i-blog.csdnimg.cn/direct/b71996a37f394739821d8d56740657ee.png
-下面我们对这段 SwiftUI 代码做一个非常详细、底层语法级别的表明，逐行剖析每个语法布局和细节。
[*]模块导入
import SwiftUI
[*] 功能阐明：
利用 import SwiftUI
导入了 SwiftUI 框架。SwiftUI 是苹果提供的声明式 UI 框架，包含了大量用于构建用户界面的类型和工具。
[*] 底层语法细节：
[*]import 是 Swift 语言的关键字，用于引入模块（module），让代码可以或许利用该模块中定义的全部公共接口和类型。
[*]模块名称 SwiftUI 指定了必要加载的库，如许可以利用 SwiftUI 提供的视图、布局、控件和其他相关功能。
[*]定义视图布局体
struct ContentView: View {
...
}
[*] 功能阐明：
定义了一个名为 ContentView 的布局体，并声明其遵循 View 协议，从而成为一个可以被 SwiftUI 渲染的视图。
[*] 底层语法细节：
[*]struct 关键字定义了一个布局体（值类型），在 Swift 中布局体是一种常用的自定义数据类型。
[*]ContentView 是布局体的名称。命名时遵循大驼峰命名法。
[*]冒号 : 后面跟着的是一个协议名称 View。这意味着 ContentView 必须满足 View 协议的全部要求。
[*]Swift 中的协议（protocol）定义了一系列方法、属性或其他要求，View 协议规定了一个视图必须实现的接口，最重要的是必须提供一个 body 属性。
[*]实现视图的主体
var body: some View {
VStack {
...
}
.padding()
}
[*] 功能阐明：
[*]定义了一个名为 body 的盘算属性，它必须返回符合 View 协议的内容。SwiftUI 利用该属性来确定如何绘制这个视图的界面。
[*]利用了 Swift 的不透明返回类型（some View），表示返回值符合 View 协议，但详细类型对调用者是隐藏的。
[*] 底层语法细节：
[*]var 声明了一个变量属性。由于 body 是只读盘算属性（没有 set 方法），它实际上体现得像常量。
[*]body 的类型被声明为 some View，其中 some 关键字利用了 Swift 的不透明返回类型特性，答应隐藏详细的视图类型细节，只必要保证返回的内容满足 View 协议即可。
[*]大括号 { ... } 内部定义了该属性的盘算逻辑，也就是返回值。Swift 中的盘算属性不必要显式返回语句（如果只有一行表达式，可以省略 return）。
[*]垂直堆叠视图（VStack）
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
}
[*] 功能阐明：
[*]VStack 是一种容器视图，用于将其子视图垂直分列。
[*]该容器中包含两个子视图：一个图像和一个文本。
[*] 底层语法细节：
[*]VStack { ... } 利用了尾随闭包语法，这在 Swift 中非经常见，用于将一段代码块作为函数的参数通报。
[*]括号内的代码块定义了 VStack 的子视图。SwiftUI 内部利用视图构建器（ViewBuilder）机制，将闭包中的多个表达式组合成一个复合视图。
[*]Image 视图
Image(systemName: "globe")
.imageScale(.large)
.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 视图
Text("Hello, world!")
[*] 功能阐明：
[*]创建一个文本视图，体现字符串 "Hello, world!"。
[*] 底层语法细节：
[*]Text 是 SwiftUI 中的一个布局体，用于在界面上渲染文本内容。
[*]构造函数直接传入一个字符串字面量。Swift 中的字符串是 String 类型，支持多种文本处置处罚功能。
[*]这里没有额外的修饰符，意味着文本利用默认样式体现。
[*]应用修饰符到 VStack
.padding()
[*] 功能阐明：
[*].padding()
是一个视图修饰符，作用是在 VStack 外围添加默认的内边距，使其与别的视图之间保持一定的间隔。
[*] 底层语法细节：
[*]这也是一个链式调用。修饰符会返回一个新的视图实例，其中包含了原始 VStack 的布局信息及额外的内边距效果。
[*]SwiftUI 的修饰符计划是函数式的，每个调用都是不可变操作，生成一个全新的视图描述。
[*]预览代码
#Preview {
ContentView()
}
[*] 功能阐明：
[*]这段代码利用 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。
代码片段：
struct CardView: View {
// 后续会在此添加属性和视图内容
var body: some View {
// 视图内容将在这里定义
Text("Card")
}
}
为什么这么写：
[*]利用 struct 定义视图符合 SwiftUI 的声明式编程方式，布局体是轻量级且高效的。
[*]遵循 View 协议意味着这个布局体可以作为一个 UI 组件被渲染和组合到其他视图中。
4.2添加 isFaceUp 属性
操作阐明：
定义一个 Bool 类型的属性 isFaceUp，初始值设为 false。如许你可以根据必要设置卡片的正反面状态，方便后续控制卡片的体现内容。
代码片段：
struct CardView: View {
var isFaceUp: Bool = false// 默认显示背面
var body: some View {
// 后续会在这里构建视图内容
Text("Card")
}
}
为什么这么写：
[*]通过属性 isFaceUp 可以动态控制视图的状态（正面或背面），让代码具有更高的可复用性和扩展性。
[*]默认值设为 false，使得当不通报参数时，卡片默认体现背面。
4.3利用 ZStack 构建条理布局
操作阐明：
接纳 ZStack 将多个图形元素叠加起来。根据 isFaceUp 的值决定体现哪种内容。
正面状态：
在 ZStack 内依次添加：
[*]一个白色填充的圆角矩形
[*]一个带边框的圆角矩形
[*]一个体现心情符号 “
页:
[1]