00:00
我们开始啊,我们来稍微回忆回忆啊,我们上午我们讲了三格的什么,三个几样东西。啊,你要写一个三格布局啊,用drop去写一个三格布局啊,我们在讲不drop的时候,最重要的就是讲它的三个布局懂不懂,因为其他的组件今天你们也看到了,其实CTRLCCTRLV就行了,懂不懂,所以明天我们上午会用不就说法去画一个东西,可是你发现这很多东西都不是我们写。直接套用人家的组件就可以了,懂吗?可是这个三格系统的源码你必须要理解啊,理解这个三格的源码有什么好处?第一个你能掌握less的一个高级编写的一个技巧,第二个你能明白响应式布局到底是什么。懂吗?OK,那我们来看,那我们想想回忆一下,我们说上午用专门去写一个三格的话,必须的元素有哪几个,容器,还有呢,行列是不是你比较有容器吧,一般我们说给个固定容器,然后再给个行,给个列,是不是?而且我们已经把容器行列的前半部分的源码全部看里面。
01:01
基本上你们应该知道原理了,这些东西是怎么出来的,懂吗?那我们来看列的后半部分。好,我们来看啊,其实上午我们讲到这边讲了,也讲了一个很重点,就是三个组合。是不是什么叫组合,我们一个列里面是不是可以写多个三个了。在不同的情况底下,会应用到不同的样式的。能理解吗?OK,那我们继续往下去分析啊,看一下我们这个源码里面,好,那这一块的话,我们说我们列的话,我们是不是这边我们已经分析到这一块了,这一块的话是不是在这边,其实我们已经把这个是关于什么列的第一步,列的第二步啊2.2长面是不是已经分析完了,是不是我们说这边是不是一个是用来把所有的列互动起来的,第二个是干嘛。控制列的宽度的感觉,有没有像一点布局?有没有,只不过没有flex布局那么友好嘛,而且这边本质上用的布局方式是浮动嘛。
02:00
三格是继续浮动的吧?能理解吗?OK,那么再来看2.3 2.3你看把这个Y换成了什么?2.3哭了啊,是不是还有我们把2.3跟2.4放在一块看啊,这个我们就统一叫他2.3懂吧,OK,这是用来干嘛的,其实这是三个物区里面的另外一块内容,叫做列偏移啊,不叫做列排序,好,这是一个什么鬼,我们看是不是去找这混合,这混合我们说2.1已经不用看了,2.2也什吗?不用看了是吧,OK,这就是2.2的吧,我们直接看什么。2.3的剖析一个什么破,是不是OK,我们说这一块内容是涉及到。2.3的内容是吧,OK,好,我们来看那这块内容里面到底有什么窝点。不管是。大家看不管是外push push,他们的入口是不是都是这个什么lo,什么规则什么。
03:05
Co啊,是不是都是它只不过你们掉的在这个嘛,在这个循环内部,你们掉的这个混合不一样吗。那么讲根据什么来判断呢?Tap吧,如果type是外的话,就调用这个嘛,其实它是一个什么。它是一个入口是吧,这才是真正什么二点的一个内容吧,那能没解啊,其实这个就是一个。入口,我把这个入口写到哪边去呢?我把它写到2.1上面去,OK走你好,这个是什么。呃,写到这边吧。好,其实它是2.2。2.3。来看一下2.35跟什么二点,但我们是不是要讲2.4啊啊就这个什么O吧,他们是2.22.32.4的入口。
04:12
好,我们说2.2我们讲的是什么,关于关系是不是二点三讲的什么。拓拉根推吗?Push,这叫列偏移。2.4讲的什么ET?啊,这叫列偏移,这个叫列排序啊,OK,我们先来看2.3好,大家看进来是不是干嘛?我们说你这个type如果等于push是不是啊,OK,你看这个push跟外他有什么区别啊,外是不是只有一个,你看最终掉的是不是只有一个,我这个这个是不地归啊,肯定是个地归吧,他会从。12这个索引开始,因为你进来传进来肯定是12,你看这边传起来是不是都是12 OK,它会从这个12索引开始一次干嘛二。
05:02
递减是不是啊减一嘛。一次递减嘛,你一开始传递这个index,进这边进来不管是2.2.3还是2.4,传进来都是什么。能不我说意思能不能。好,你们现在要学会回应我啊,因为什么?因为我还算要温柔的啊,这最后几个老师过来,你如果不睬他的话,他就不讲了,能不理讲好来看一下,我们说不管是2.2.3 2.4传进来第一层都是,是不是之前我们做的递归都是递增的,是是这边这个地会模式坏了,是干嘛递减的。懂吗?OK,我们来看2.2,我们说什么对外这块东西进行递减吧,是不是,你看我们说这个是2.2.32.4的入口,OK,我们看2.2进来对什么。你看这个函数是不是就是在我递归里面调用的这个相当于是一个递归体嘛。
06:04
懂吗?每次都在地柜内部要被调用一次吧,是不是,那这个的话相当于他被被他被他被调用几次啊。12次是不是一到12嘛,那边讲OK,那我们过来看那2.3这边应大于零,问你这个东西他会这个D要要要被调用几次啊。他被一次他被。12次,他被教几次啊,一次很明显了。能理解吗?为什么?因为你因为大家看这一边,当我这个值减减减减到零的时候,问你零是不是大于等于零,要不要进来,要去执行这个地归体的吧,如果你这个太是外的话,你看一下有没有哪个等零还可以去跟外匹配上来,有吗?没有,可是我这边有没有有你看一个是他,一个是他。等于零什个嘛,等于零什么,相当于它是把一到12分成了一波,把零单独分成一波,懂不懂,那所以说最终这边用出来样式应该找找什么样,跟外形应该差不多。
07:10
是不是CTRLC,只不过它比YC要干嘛。多一个零是不是OK,走你。他要多一个零。是不是,而且零的时候这个值是凹凸,那不是零的时候呢。你看他改的是什么?Left push的时候改的是left走,你改的是left是不是,是不是也是百分表。是不是OK,我们来看那拉的时候呢,改了什么?Right嘛,切记零的时候是多少。是凹凸不是零,懂不懂零的时候,这个值不是零,这个很重要,很多人都不知道懂吗?OK,这个自己要看一下好走,你那我这边干嘛这一横。
08:02
我往后写吧,好吧。嗯,后面不怎么好写啊,写在后面啊,不行了,我们一定要写在后面。没法横向复制啊,能能横向复制,我还在这边纠结吗?只有你CTRLC啊,那我去干嘛一个一个复制了,为了你们一个比较好复习。啊,OK ctrl c好,这个里面是什么。什么是不是记住这个是什么的,后续的时候是不是OK。好,后面这个呢。没网。你们能看到屏吗?看不到屏幕了。都没网了。
09:03
你们有没有有没有都可以看到吧,我在动,有没有看到鼠鼠标在动,没看到看到了是吧?OK,这是拉啊OK,我说拉改的什么。Right能不理解,好,走你OK,走你好,那其实后面我就干嘛再写一个是不是就够了。是吧,零的时候注意是什么凹凸啊,这边写一写也也也也。整你省略号啊,已经写的很细了啊,再说笔记不行,你自己打理了啊,OKR啊,A啊,有一件事情我得告诉你们,到了后期做项目的时候,这个笔记都得你们自己去写啊,虽然说我们会给笔记啊,可是你放心,这个笔记肯定肯定不详细啊,因为这个笔记最终需要你们自己。行吗?写写出来。啊,笔记都得自己写出来,OK。
10:03
好,所以那我们说切记,我们说为零的时候,不管是push还是不为,为零的时候一定是凹凸,可是我们得看看前面这个选择器到底应该长什么样。当中是不是加个不行。是不是啊,也就是说写的时候的话是干嘛,这边应该有什么push啊,是不是啊,OK这里。CTRLCCTRLV这边是一是吧,这边应该是,这边应该是。是杠零。这边应该是一嘛,是不是OK这边呢。当中也得带着吧,看看拉吗?是不是破吗,你看。拉的时候是不是当中也带了,你看这边是不是直接给你三零了,In什么不用了嘛,能不理解CTRLCCTRLB。PU,是不是我问你XS有这种东西,MD有没有一样的?
11:01
只不过我们现在只分析了谁,只分析进来他第一次调用。是不是满足条件的话,是不是还会掉一个,最终会给你覆盖掉的啊,其实也不是覆盖,应该是个组合。懂吗?能理解我意思吗?好,这是一个push,一个什么拉切,一个改的是right,一个改的是left,是不是现在大家来看。我们在写的时候,上来我们所列的身上,你看公共样式吧,看到它是干嘛用的。为什么盆形象会相对定位,就是为了你以后列排序来用呢?因为我这边改变了你的left right吗?懂不懂?所以你这边一定得是个相对定位。能理解吗?OK,那我们今天来说一下,我们这个这个是做什么,这个是做浮动的,这个是做。外的控制的,他们俩是做什么?列、排音、列篇,还有什么列?
12:02
列排序跟列,就是做列,向左排序跟向右排序的,懂吗?OK,拎过来。把这个注释给它拎过来走,你CTRLV好。OK,上来。好,CTRL这个自己能看懂它啊,OK,然后往上走,他们俩是不是也讲完了,那是不是还有它是不是很明显套路应该是一样的,是不是来看一下这个说是2.3吧,合起来合起来,合起来合起来吧,再来看这个什么。吧,你看前面,你看前面是不是大于零等于零,对的Y是不是只有大于零啊,它是不是压根没有做任何应该限制啊,说明所有的循环体用的都是一个,也就这个循环,你要从零走到啊,要从12递减到零走的都是它。能理解吗?这个是2.4,是不是走你OK,这个叫什么2.4,我们什么来看,最最前面列偏移,看他控制什么,说是控制的吧,来看他最终其实控制什么left。
13:17
能不能理解啊?OK,那想想这个值可能是个负值吗?嗯。可能是负值吗?看这个值有没有可能是负值啊,我们得看这个什么最外层这个什么2.2的调用吧,他们是什么入口吧,是不是只能大于零,你能是负值吗?不能是负值吗。能不能理解?OK,好,那我们说最终它会渲染出什么东西啊?跟这个差不多吧,CTRLC啊,只不过应该叫什么。叫什么?你看这边是不是加个offset,是不是CTRLC这边要加一个offset,是不是加一个offset,加一个offset吧,Offet里面什么MU left。
14:06
OK,是不是等比例了是不是好?OK,你们说有没有零啊?有零是不是零是多少?这边零就是能不能理解啊,好,我们说列,这叫列偏移吧,列偏移跟列排序是不是都有零,零这个一定可是值一样吗?列排序的时候这个零代表的是多少?凹two是不是列偏移的时候呢?零就是零啊外上面有应零的控制吗?有吗?没有。那边讲说你有可能写这种选择器吗。就是你在你做编码的时候,你有可能写一个这样吗?C-XX杠零吗。有吗?没有的。能理解吗?懂吗?OK,那我们来吧,这叫什么练偏移,OK,那到这一块我们整个三个月嘛,是不是全部看完了。
15:08
你看我这个文件里面东西全全部都看完了吧,套路就是一个递归。是不是只不过递归根判断嘛,形式不一样而已,懂不懂,OK,那我们来看,其实我们说下面三个我也不带你们看了,一样的套路。只有把这个XS换成SM跟FD跟LG就可以了,读懂,那其实这个文件里面就定义了容器,定义了行,定义了列啊列里面分,首先让它动起来,其次给他分配外色,再其次列排序,再其次列偏移,好那到这一块,整个三个布局里面说的内容全部讲完。了解吗?那这就是我们不吧啊,他在用Les去进行三格设计的时候,他写了一段比较牛逼的代码啊,这个代码从来没有被超越,一啊,从来没有被超越,一直在被。模仿啊,我们来可以可以来看一下其他的一些三个系统啊,我们现在讲的是不是不是这三个系统啊,来看一些其他的UI布局,UI框架啊,比如说它。
16:08
来UI吧,是不是OK,我们来看一模一样的,找找到什么文档,文档里面看它它它有没有三个。肯定有啊,三哥三哥在哪里?三哥三哥在哪里?三哥看不到啊。看不到啊,看不到三哥。啊,布局你看三哥是不是OK啊,你又吓我一跳,OK来看一下,好,你看三个,这个你看可以,可选值是一到12,你看。这个东西你看是不是差不多的写起来,你看好嘛练嘛,他干嘛就把前面这个东西换一换嘛,我们能不能换,待会我就带你们换。我也写个三个补给出来,那就是把名字换过来,那就是我的,反正他把名字换过来,他就是他的嘛,那我把名字换是不是就是我的,我也不管是不是,反正你靠这个赚钱,我也能靠这个赚钱。
17:02
啊,来试一试。好啊,我们先不去自定义我的三个系统,那这边我们把列拼一列,排序的源码也讲完了,OK,那我们来写一个实例。OK啊,我看这个笔记有没有帮你们写完。啊,也写完了吧,是不是OK,这边是列排序,这边是列偏移,是不是OK这里。好。
我来说两句