ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-05-21 23:02:44  阅读:240  来源: 互联网

标签:body 知识点 变量 Lesson2 CS193P SwiftUI ForEach 数组 View


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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有