CS193P2021学习笔记第一课：SwiftUI入门

我一直在学习SwiftUI的使用，我也深信这将是苹果APP开发生态主流框架的未来，前面学习过Stanford（斯坦福）CS193P 2020年版的SwiftUI1.0课程，觉得这是最详细最好的相关入门与进阶课程（没有之一），今年春季又推出了新版的教程我迫不急待的看了一遍，昨天（周一）更新上线了最后2课。今天抽时间看完后决定为了深入学习课程内容，及方便以后查找课程里的知识要点，决定把每一课重要的内容与代码记录下来。对于我今后在开发中解决问题应该是非常有帮助的。

一、课程介绍

 老师Paul Hegarty介绍了这门课程的基本内容，然后开始着手开发iOS应用程序(一款名为“记忆”的纸牌匹配游戏)。Xcode开发环境用于演示SwifitUI用于组合用户界面的声明性接口的基础知识。

二、准备工作

首先这不是一堂面对初级学者的课程，你需要对swift语言有一定的熟悉，并且具有阅读开发文档的能力。大不部分的作业与自学部分都是以阅读苹果开发文档为主。然后熟悉Xcode的安装与使用。新建项目及文件，各类文件的作用与区别。

1、新建项目：对于项目名字、组织与识别ID的说明。

2、配置项目属性：设置项目运行的平台有哪些。

3、新建项目时生成的各文件介绍。

4、预览代码及代码属性修改器的介绍和其它使用小技巧等。

三、开始函数式编程

对于函数式编程的概念进行了系统的介绍与实例。函数定义了行为，需要做的事物都可以交给函数处理。即使是存储工作。函数是一等公民。

struct ContentView: View {
    //提供一个body变量以符合View协议
    var body: some View {
        //some View的意思是返回行为与View相似的一系元元素
        Text("Hello, world!")
            .padding()
    }
}

这里把some View比喻成了乐高的组件，在some View可以返回各种元素，文字(Text)，颜色(color)、布局(VStack、HStack、ZStack)等一系列元素。而且构建成整个App的这一系列元素就是乐高的某一个小模块。

除了返回some View下面的代码也是合法的。

struct ContentView: View {
    var body: Text {
        Text("Hello, world!")
    }
}

 至于有多少符合返回some View协议的可以参考文档：https://developer.apple.com/documentation/swiftui/view 下面的Conforming Types这也是我们以后视图学习的重点，我个人理解为HTML的主要标签。而修改器(modifier)就好像CSS一样。哪么ViewModel就可以说成为JS代码了。当然我个人这样理解是为了方便记忆与学习，他们的区别肯定很大，因为SwiftUI的MVVM可比HTML+CSS+JS强大多了。

四、本课代码与注释

除了理论部分，本课只做了很少的代码。主要是体验函数式编程的乐趣。 

struct ContentView: View {
    var body: some View{
        return ZStack(content: {
            RoundedRectangle(cornerRadius: 20)
                .stroke(lineWidth: 3)
            Text("55mx.com").foregroundColor(Color.orange)
            //子元素修改前景色后会覆盖掉父元素的值
        })
        .padding(.horizontal)//填充只针对ZStack有效
        .foregroundColor(Color.red)//前景色会应用于ZStack里的所有子元素
    }
}

对代码进行一些清理工作，根据Swift的语法，我们可以先去看只有一个项的return,闭包最后一个参数可以不用写，可以删除掉content，然后编译器可以自动推断出颜色的枚举选项，所以前面的Color也可以删除后代码如下：

struct ContentView: View {
    var body: some View{
        ZStack{//清理了content参数与retrun
            RoundedRectangle(cornerRadius: 20)
                .stroke(lineWidth: 3)
            Text("55mx.com").foregroundColor(.orange)//清理Color
        }
        .padding(.horizontal)
        .foregroundColor(.red)//清理Color
    }
}

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/144