SwiftUI入门 - 1. 创建项目，xcode界面

概述

Swift UI 已经出了很久了，都说 Swift UI 好用，但一直没有具体上过手，简直浪费我手里的Apple全家桶，于是决定从即日起做一个SwiftUI入门学习的合集，从0开始学习这一门好久之前就该学习的技术，主要以 iOS 开发的实际操作为主，计划进行以下几个步骤：

1. 一切以实操为主，前期可以忽略大部分细节以及理论知识，首先保住我的新鲜感以及兴趣，万不能半途而废😂
2. 完成第一个小项目 todolist，并搞几个小细节功能体验。
3. 开始积累细节处理与理论知识等，与其他已经熟练的技术做一些入门阶段的对照学习。
4. github上找一个MIT协议的开源swiftUI项目进行部分学习解读。
5. 了解一些swiftUI的中大型项目的代码组织方式、实现思路及项目管理方式。
6. 完成第一个自己的 iOS App 上线。
7. 扩展 了解 Mac端，iPad端，watch端开发的异同。

菜鸟入门，各位大佬轻喷，如有谬误之处欢迎讨论建议，也欢迎各位道友与我同行

第一步当然是下载Xcode，安装环境

打开你的 App Store，搜索xcode，安装，打开，登陆AppleID，好吧，装不下去了，我一直都有xcode，所以我直接开始了

出发

一、点开 Xcode，点击 Create a new Xcode project

二、直奔目的地，IOS APP 而去

三、取个名字吧，第一个项目，当然是老规矩 hello world 了

Organization Identifier 随便写个凑合，本App的包名

Bundle Identifier 把 上面填的两个拼凑起来了，还不如让我一次填完

Language 和 Interface 当然是选 Swift以及 SwiftUI了

Include Tests 大概意思包括测试功能文件吧

Use Core Data - Host in CloudKit 也许是使用iCloud文件同步的能力？先不点，点了现在也不知道怎么用

没关系，这些不影响我先进去看看

四、next => 接下来选择项目文件地址，create，就进入了开发的主体界面

可以看到整个界面被分成了四块

从左到右分别是，文件树、代码编辑、预览( 为什么叫canvas，难道是因为这里是用canvas实现的？)、属性框

文件树上方有一个播放按钮，点击之后开始编译，并使用模拟器 （中间顶部的 iPhone14Pro，可以选择其他的）打开，如图：

五、接下来就是最最核心的代码了

// 导入包这属实是基本操作了，没什么好说的
import SwiftUI

// struct 结构体，姑且先当一个类来看，具体有什么区别后来再了解
// View 应当是一个类型
struct ContentView: View {
    // 定义了一个body
    var body: some View {
        // 顾名思义，纵向布局，里面的所有元素按照竖向排列
        VStack {
            // 一个图片元素，系统图片 globe，想来是那个小地球图片没跑了
            Image(systemName: "globe")
                .imageScale(.large)  // 图片大小，大，我尝试将 .large改成了.small 确实变小了，并且，输入.的时候还有提示，这很好
                .foregroundColor(.accentColor) // foregroundColor,前景色？强调色？accentColor 也可以翻译为强调色
                // 当在()里面输入.的时候，有很多提示，可以切换不同颜色看看
            // 一个文字元素，这没什么好说的了😂
            Text("Hello, world!")
        }
        .padding() // padding应该是盒子模型里面的概念，用法应当也相近，后续再来研究这个
    }
}

// 看这个名称，content view preview，上面那个结构体的预览
// 我把这个结构体删了之后，果然右边的预览消失了
// 我猜这个位置可以用来调试不同的 View 视图
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

总结

1. 第一步没什么知识点，看看玩玩儿，保持兴趣
2. 总的来说 SwiftUI 的代码还是挺简洁的
3. 代码提示很强大，一个点号，好多东西都出来了
4. 预览调试也挺方便的，模拟器还是挺好看，比某某 studio好看多了😂
5. 布局VStack，HStack，应该与 CSS 中的flex布局可以有所对照
6. 语句结尾可以加分号，嗯，很合胃口，但是不加好像也挺好看的，得适应适应

如有兴趣，请关注我，各大平台同名：思跃喵