其他分享
首页 > 其他分享> > 斯坦福CS193P 2021春季SwiftUI 2.0课程 Lesson2知识点速记

斯坦福CS193P 2021春季SwiftUI 2.0课程 Lesson2知识点速记

作者:互联网

https://www.bilibili.com/video/BV1q64y1d7x5?spm_id_from=333.999.0.0

本文是学习b站搬运的斯坦福SwiftUI视频课程所做的学习笔记,会尽可能地覆盖视频提到的大部分知识点,将按照每一节Lesson分p更新。

Lesson2-编写demo

实时预览(多设置一个dark mode)

想要同时预览dark mode和light mode两个模拟器,就需要在胶水代码里加入

image

让卡片翻转后,即便在darkmode下,背景也固定是白色,就需要再创建一个rectangleView填充白色。之前的那个rectangleView现在只像是一条跑道。

传入参数

传入参数不是用等号,而是 变量名: 赋的值 这样的格式,类似于java函数。例如
image
image

内部常量

对于重复多次的代码RoundedRectangle(),定义为内部常量。这样更易读。
image

推断类型

推断类型infer type很方便,定义时不需要写类型的名字。

为什么shape后面不写成let shape:RoundedRectangle = RoundedRectangle(cornerRadius: 20)呢?

这样不会报错,但如果想写成Circle(),就不方便改。

let shape = Circle()
image

@State作用

当我们要为View Modifier 添加手势跳转时,SwiftUI里视图是不可变的, 只会不停地被重建视图。所以isFacedUp变量不能在View里被修改。这时候就暂时在变量isFacedUp前面加@State ,使得isFacedUp的value能被改(这个Bool变量的指针指向不变,但它所指向的boolean区域的这个变量的区域的value改变)

实时预览(多点触控)

想要在实时预览里实现多点触控的模拟,可以点击实时预览的手机模型上方小三角运行按钮。

快速查看文档说明

option + 单击 ,就能进入Swift文档说明

定义数组

若定义时数组里没有元素,就不能不写类型名称

image

定义时数组里有元素,可以让Swift自己推断:

image

数组类型这样写: Array 、 Array
image

Array太常用了,可以简写为[String]

image

ForEach循环

ForEach 是SwiftUI里的循环语法

官方文档给出通过ForEach显示数组内所有字体以及字体名称的例子:
image

这个作为传入参数的数组一定要是Identifiable的,可以像上面例子那样数组设置成Identifiable类型,也可以像下面这样,为ForEach的argument里加一个名字叫id的argument,写成反斜杠点self,swift中每个结构体都有self这个变量,用来指代本身。

image
image

如果不这样,就会导致同一字符串无法被识别->点击一张飞机卡,两张飞机卡会同时翻面。

截屏2022-04-10 下午6.35.21.png

带参数的函数

自己写的函数怎么带参数?

{ arg1, ar2 In

xxxxxxx

}

缩进快捷键

Tab + fn整体缩进

Spacer()

Spacer()是个尽量占空间的一种View.

They take any open spaces available that no one else wants.

各种View都能用的简略写法

简化定义View时,最后两个参数是函数的写法——删除小括号、第一个参数的label、写完第一个函数后的逗号
image
image

函数式编程构建UI

SwiftUI在构建UI时,总是函数式编程。具体做的是build data structures that behave like a View. View is a rectangle on the screen.It can draw.(布置各种组件,设置组件的特质) It can receive multi-touch events. 只需要调用View内部的函数即可实现。We can put View together to build complicated UI.

some View

既然View功能那么强大,我们使用时也需要付出一些责任,责任就是要在data structure里(struct ContentView)实现一个名字叫body的变量,类型是some View,必须要返回某些东西,但是Swift已经帮我们推断了,所以不需要明确写出return xxx

View Builder

ZStack、HStack、VStack是View Builder,相当于是装lego积木的袋子。

ForEach也相当于是装lego积木的袋子。为数组中的元素创建View,必须是Identifiable元素,这样才能追踪匹配。

一般我们不希望主View的body太冗长,所以通常会分离出一个个小组件(a new struct that behaved like a View),就好比是一个个椅子lego。

或者创建小变量

var Add: some View { 

	Button { … } 

}

使得变量body不是主结构体里唯一的View。

懒加载

LazyVStack将卡片放入网格中,有几行就显示几行。

HStack和LazyVStack都是View Combiner。“Lazy懒”在于懒得访问body里面的所有小View,只会访问最外层的View里的几个变量和一个大的body。仅在需要时创建。堆栈视图在需要将它们呈现在屏幕上之前不会被创建。

A view that arranges its children in a line that grows horizontally, creating items only as needed.The stack is “lazy,” in that the stack view doesn’t create items until it needs to render them onscreen.

创建时注意:不能直接在columns参数值里直接写数字,要用一个GridItem类型的数组。

第一个列的宽度固定为200;两个GridItem数组就显示两列;因为LazyVStack想要在一整个屏幕里装下尽可能多的元素,所以行的高度就是文本的高度。

LazyVGrid(columns: GridItem(.fixed(200)), GridItem() )

aspectRatio

设置宽高比,是一个View modifier。其第一个参数是宽高比的值(比如2/3),第二个选择.fit

ScrollView

通过ScrollView 使得一个屏幕装不下的内容可以通过手势滑动装下

形状描边(.strokeBoard)

是在形状的内部描边,形状可以是圆形、矩形、圆角矩形……

RoundedRectangle(cornerRatius: 20).strokeBoard(linewidth: 3)

圆角矩形的弧度为20,在其内部描边,边的宽度为3像素。

标签:body,知识点,变量,Lesson2,CS193P,SwiftUI,ForEach,数组,View
来源: https://www.cnblogs.com/kuaikuai/p/16211725.html